前后端交互:form表单与模板引擎

Posted “玫瑰无原则 ”

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端交互:form表单与模板引擎相关的知识,希望对你有一定的参考价值。

目录

form表单

基础知识

概念

组成

常用属性

表单同步提交

概念

缺点

表单事件监听

submit监听方式

on监听方式

阻止表单默认行为

serialize 快速获取表单提交的数据

模板引擎

基础知识

概念

优点

art-template模板引擎

使用

标准语法


form表单

基础知识

概念

       <form> 标签用于为用户输入创建 html 表单,表单用于向服务器传输数据。

组成

  • 表单标签
  • 表单域:文本框、密码框、多行文本框、复选框、单选框、下拉选择框、文件上传框等
  • 表单按钮 button

常用属性

action :提交表单时,向何处发送表单

  • 默认值就是当前网页的URL地址
  • 提交后  表单会跳转到action属性设置的URL地址

target:规定在何处打开action URL

  •     默认 _self 在相同和框架中打开action  URL (在当前网页打开)

method:规定何种方式把表单提交到 action URL

  • post:提交数据更加隐蔽,适合大量、复杂的或者文件上传;
  • get:默认,可在在网址里面可以看到用户提交的信息不安全,适合少量的、简单的数据;

enctype:规定发送表单数据之前如何对数据进行编码


   

表单同步提交

概念

     触发提交按钮 让页面发生跳转到 action URL的行为。表单具有默认的提交行为,默认是同步的。form标签内部的 action 和 method 属性就是用来编写同步的提交行为,同步表单提交,浏览器会直接将服务器响应的内容渲染到页面上。

缺点

  •   页面发生跳转
  •   页面之前的状态和数据会丢失
  • 推荐:表单只负责采集数据,Ajax负责将数据提交到服务器

表单事件监听

submit监听方式

<form action="./index.html" method="post">
    <input type="submit" value="">
</form>

<script>
    $("form").submit(function (e) 
        console.log('submit监听表单事件');
    )
</script>

on监听方式

<form action="./index.html" method="post">
    <input type="submit" value="">
</form>

<script>
    $("form").on('submit', function (e) 
        console.log('on 监听表单事件');
    )
</script>

阻止表单默认行为

<form action="./index.html" method="post">
    <input type="submit" value="">
</form>

<script>
    $("form").on('submit', function (e) 
        e.preventDefault();//阻止表单默认提交行为
    )

serialize 快速获取表单提交的数据

  • 语法:$ ( selector ). serialize()
  • 返回值:form表单中所有带有name属性的表单元素的值,使用&符号衔接;

   没有name属性的表单元素是无法获取的!

<form id="form1">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit"> 提交</button>
    </form>

    <script>
        $('#form1').serialize();
        //调用的结果:
        // username = 用户名的值 & password = 密码的值
    </script>

模板引擎

基础知识

概念

    模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

优点

  • 减少字符串的拼接
  • 代码结构更清晰
  • 易于维护阅读

art-template模板引擎

使用

  1. 导入art-template
  2. 定义数据
  3. 定义模板
  4. 调用template函数
  5. 渲染HTML结构

 代码结构:

<body>

    <!-- 1. 导入art-template -->
    <script src="./template-web.js"></script>
    <script src="./jQuery.min.js"></script>

    <div id="container">我是容器 我用来装渲染好的结构</div>

    <!-- 3.定义模板 -->
    <script type="text/html" id="tpl">

        <h1>name----age</h1>

    </script>

    <script>
        //2.定义数据
        var data =  name: 'zs', age: 20 ;
        //4.调用template函数
        var htmlstr = template('tpl', data);
        //5.渲染HTML结构
        $("#container").html(htmlstr);
    </script>

</body>

 效果展示:

标准语法

  • 原文输出:@ value  :适用于带标签的内容   例如 <span></span>
  • 条件输出:if ...  else if...  /if
    <script type="text/html">
        if value输出内容/if
    
        if value1输出内容1
        else if value2输出内容2
        /if
    </script>
  • 循环输出:each遍历数组
    <script type="text/html">
        each arr
           $index $value
        /each
    </script>
  • 过滤器:本质是function函数
    <script type="text/html">
    
        <div>注册时间:regTime | dataFormat</div>
    
    </script>
    
    <script>
     
        template.defaults.imports.dataFormat = function (dates) 
            var date = new Date(dates);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var mi = date.getMinutes();
            var s = date.getSeconds();
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            h = h > 9 ? h : "0" + h;
            mi = mi > 9 ? mi : "0" + mi;
            s = s > 9 ? s : "0" + s;
            return `$y-$m-$d  $h:$mi:$s`;
        
    </script>
  • 正则表达式 exec函数:检索字符串中的正则表达式的匹配
    <script>
        //查询时候含有该字符串  有返回匹配值  没有返回null
        var str = 'hello';
        var pattern1 = /o/;
        var pattern2 = /m/;
    
        // 输出的结果为一个数组["o", index: 4, input: "hel1o", groups: undefined]
        console.log(pattern1.exec(str));
    
        //无法匹配返回 null
        console.log(pattern2.exec(str));
    
    </script>
    
    <script>
        var str = '<div>我是name</div>';
        var pattern = /([a-zA-Z]+)/;
        var patternResult = pattern.exec(str);
    
        console.log(patternResult);
        //得到name相关的分组信息
        // ["name", "name", index: 7, input: "<div> 我是name</div>", groups: unde fined]
    
    </script>

以上是关于前后端交互:form表单与模板引擎的主要内容,如果未能解决你的问题,请参考以下文章

关于前后端分离与模板引擎

使用form表单的name属性简单实现前后端交互

使用form表单的name属性简单实现前后端交互

前后端分离实践——Jsonp数据交互

前后端数据交互处理基于原生JS模板引擎开发

ASP.NET使用AJAX完成前后端表单数据交互(包含Vue绑定下拉选项)