首页 > 其他分享 >Ajax：表单 & 模板引擎

Ajax：表单 & 模板引擎

时间：2024-10-26 17:18:23浏览次数：6  
标签：name 提交 表单 Ajax html template var 模板

Ajax：表单 & 模板引擎

form 表单

在HTML中，可以通过<form>创建一个表单，收集用户信息。而采集到的信息想要发送给后端，此时就要与Ajax进行配合。

form 属性

在原生HMTL表单中，包含四个基本属性：

属性功能值
action向何处提交表单内的数据url
method提交表单的方式get、post
enctype如何对表单数据编码
target打开action url的为止_blank、_self
  • action

action的属性值往往是后端提供的一个url地址，这个地址接收并处理来自前端的数据。如果<form>没有指定该值，那么默认为当前页面的url。

示例：

<form action="/login">
  <input type="account" name="account" />
  <input type="password" name="password" />
  <button type="submit">提交</button>
</form>

这是一个表单，指定action="/login"。

输出结果：

请添加图片描述

可以看到，点击提交后，地址变成了/login?account=123456&password=54321，其中/login就是表单提交到的地址，而?后面是表单的参数。

这里有两个细节：

  1. 目标地址默认是在当前页面打开
  2. 表单的参数追加到了地址的末尾，说明默认是get请求
  • taget

taget指定在何处打开地址，刚刚打开地址是，是默认在当前页面打开，通过指定target就可以改变打开目标地址的方式。

  1. _blank：在新窗口打开
  2. _self：在当前窗口打开，默认值
  • method

刚刚发现，表单的提交方式默认为get，如果想要切换表单提交方式，可以通过method属性。

  1. get：以get形式发送请求，默认值
  2. post：以post形式发送请求

示例：

<body>
  <form action="/login" method="post" >
    <input type="account" name="account" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>
</body>

此处把表单的提交方式改为post。

提交表单后，查看控制台：

在这里插入图片描述

这次提交数据后，地址就是/login，表单的数据不再以?的形式追加到地址末尾。而在Payload窗口，可以看到表单数据account和password已经放在了请求的内部。

  • enctype

enctype用于指定表单数据的编码方式，其有三个可选值：

  1. application/x-www-form-urlencoded：在发送数据前编码所以的字符，默认值
  2. multipart/form-data：不对字符编码，如果表单内上传文件时，必须使用该选项，防止错误编码
  3. text/plain：空格转换为'+'字符，但是不对特殊字符编码，几乎不用

原生的HTML表单有很多缺点：

  1. 表单提交后，会发生页面跳转
  2. 表单提交后，会清空表单原有数据

想要处理这些问题，那就要引入JavaScript和Ajax，JavaScript可以阻止默认行为，禁止页面进行跳转。但是这样也会阻止数据的提交，因此使用Ajax来进行表单数据提交，不再让表单自己提交数据。而且Ajax提交数据，不会清空表单的内容。

Ajax操控表单

事件监听

如果要在用户提交表单时，让Ajax立刻响应，代替表单的提交任务，此时就要对表单进行提交事件的事件监听。

只需要调用原先的jQuery接口即可：

$('form').submit(function(){})

$('form').on('submit', function(){})

以上两种方式，都可以实现对表单的提交事件的监听。

阻止默认行为

想要阻止默认提交行为，也很简单：

$('form').on('submit', function (e) {  
  e.preventDefault()
})

在回调函数中，添加是事件参数e，随后调用preventDefault方法阻止默认行为，这可以同时阻止提交行为和页面跳转。

收集表单数据

现在已经阻止了提交行为，接下来就要通过Ajax代替原先的提交行为了。在提交数据之前，就要先获取到表单的数据，这里jQuery封装了接口，可以一次性获取所有表单内容。

语法：

$('form').serialize()

注意：使用这个方法时，要确保表单的每个栏目都有name属性，否则无法获取到对应的栏目。

示例：

<form action="/login" id="f1">
  <input type="account" name="account" />
  <input type="password" name="password" />
  <button type="submit">提交</button>
</form>

<script>
  $(function () {
    $('#f1').on('submit', function (e) {
      e.preventDefault()
      var data = $(this).serialize()
      console.log(data)
    })
  })
</script>

输出结果：

在这里插入图片描述

此时data就已经拿到了表单的内容，最后就可以通过Ajax进行发送了。

模板引擎

当从表单中拿到了大量的数据，此时可能就需要把这些数据重新渲染到页面上，如果对于原生的JavaScript或者jQuery，处理这个都是比较麻烦的，需要进行字符串拼接等操作，把数据拼接到标签的内部。

假设现在要渲染以下内容：

var data = {
  title: '<h3>用户信息</h3>',
  name: '张三',
  age: 18,
  isVIP: true,
  regTime: new Date(),
  hobby: ['HTML', 'HTTP', 'Linux']
}

渲染为如下结构：

在这里插入图片描述

如果只使用html和jQuery，那么就要从对象提取信息，然后一个一个通过.html方法把信息添加到页面中，对于最后一个hobby数组，还需要通过.each方法进行遍历，追加到页面中。

art-template

这很麻烦，模板引擎可以解决这个问题，以模板的形式，快速渲染大量的信息到网页。此处选用art-template模板引擎，可以到以下网址下载：

http://aui.github.io/art-template/zh-cn/docs/installation.html

只需要把template-web.js（gzip: 6kb）这个文件下载下来，并通过JavaScript的形式引入即可使用。

<script src="./template-web.js"></script>

导入art-template后，全局就会多出一个template方法，这就是模板引擎的核心方法。

示例：

首先，模板引擎的内容要定义在<script>标签内部：

<script type="text/html" id="tpl">
  <p>姓名: {{name}}</p>
  <p>年龄: {{age}}</p>
</script>

此处要制定type属性和id属性，默认情况下type="text/JavaScript"，表示以JavaScript形式解析<script>内部的内容，此处改为text/html，表示以html形式解析内容。

随后就可以在内部编写html的代码了，在编写代码时，可以使用{变量名}}的形式来引入外部变量，这个变量会直接取对象中的值进行填入。

模板语法：

template('id', 对象)

此处的id是刚才<script>内部的属性id="tpl"，而对象是要填充的对象，最后会返回格式化后的html字符串。

示例：

<script>
  var data = { name: '张三', age: 20}
  var htmlStr = template('tpl-user', data)
  $('#container').html(htmlStr)
</script>

在对象data中，包含name和age两个属性，这刚好和之前指定的{{name}}和{{age}}相匹配。随后调用template('tpl, data)，表示用data这个对象值，去填充模板tpl的内容，此时就会返回一个html格式的字符串，直接把字符串填入目标容器即可。

<div id="container"></div>
<script type="text/html" id="tpl-user">
  <p>姓名: {{name}}</p>
  <p>年龄: {{age}}</p>
</script>

<script>
  var data = { name: '张三', age: 20}
  var htmlStr = template('tpl-user', data)
  $('#container').html(htmlStr)
</script>

输出结果：

在这里插入图片描述

这样就实现了快速渲染对象的内容到html中。

{{}}语法

刚才已经见过{{}}的基本功能了，其实就是把对象中命名相匹配的内容，直接填充到html中，其实它还支持很多种语法格式：

{{value}}
{{obj.key}}    // 获取对象值
{{obj['key']}} // 获取对象值
{{a ? b : c}}  // 三元表达式
{{a || b}}     // 逻辑判断
{{a + b}}      // 算数运算
原文输出

如果输出的内容是一个字符串，并且字符串中包含html标签，如果希望这个标签被渲染，需要使用原文输出：

{{@ value}}

在值前面加一个@符号即可。

示例：

<div id="container"></div>
<script type="text/html" id="tpl">
  <p>姓名: {{@ name}}</p>
  <p>年龄: {{age}}</p>
</script>

<script>
  var data = { name: '<li>张三</li>', age: 20}
  var htmlStr = template('tpl', data)
  $('#container').html(htmlStr)
</script>

输出结果：

在这里插入图片描述

通过{{@ name}}，<li>标签就被正常解析了。

条件输出

有时候，可能需要在输出时进行条件判断，比如说如果某个用户是VIP，要额外输出VIP的剩余时间。而如果他不是VIP，这个内容就不用输出。对于这种情况，可以使用条件输出来完成。

语法：

{{if value}} 输出内容 {{/if}}

{{if value}} 输出内容1 {{else}} 输出内容2 {{/if}}

{{if value1}} 输出内容1 {{else if value2}} 输出内容2 {{/if}}

示例：

<script type="text/html" id="tpl">
  <p>姓名: {{name}}</p>
  <p>年龄: {{age}}</p>
  {{if isVip}} 
    <p> VIP剩余时间: {{time}} </p>
  {{else}}
    <p> 不是VIP </p>
  {{/if}}
  <hr>
</script>

在模板中，通过{{if isVip}}来判断该用户是不是VIP，并选择不同的输出结果。

填入以下两个对象：

<script>
  var zs = { 
    name: '张三',
    age: 20,
    isVip: true,
    time: 100
  }

  var ls = { 
    name: '李四',
    age: 25,
    isVip: false,
    time: null
  }

  var htmlStr1 = template('tpl', zs)
  var htmlStr2 = template('tpl', ls)
  $('#container').html(htmlStr1 + htmlStr2)
</script>

示例中，张三是VIP，而李四不是，最后这两者渲染出来的结果就不一样：

在这里插入图片描述

循环输出

如果输出的目标是一个数组，可以通过循环输出来遍历所有的数组元素。

语法：

{{each arr}}
	{{$index}} {{$value}}
{{/each}}

其中arr是被遍历的数组，而$index是下标，$value是元素值。

示例：

<script type="text/html" id="tpl">
  <p>姓名: {{name}}</p>
  <p>年龄: {{age}}</p>
  <ul>
    {{each hobby}} 
      <li> {{$value}} </li>
    {{/each}}
  </ul>
</script>

在<ul>内部，通过循环遍历所有的hobby，并通过{{$value}}拿到元素值，渲染到li中。

给张三加上hobby属性：

<script>
  var zs = { 
    name: '张三',
    age: 20,
    hobby: ['HTML', 'HTTP', 'Linux']
  }
  var htmlStr = template('tpl', zs)
  $('#container').html(htmlStr)
</script>

输出结果：

在这里插入图片描述

这样就可以快速遍历所有的数组成员了。

过滤器

如果说，对象中的元素并不是直接填写到页面中的，而是要经过一定的处理之后在填入。比如说商品价格，可能要乘以某个值后，以打折的价格显示在页面中，这就需要引入过滤器。

{{value | filterName }}

其中value是要处理的值，这个值会交给filterName 函数处理，函数返回值会最为最终结果填入模板。

过滤器函数并不是直接就可以调用原生的函数，而是要导入到模板中：

template.defaults.imports.filterName = function(value){ 函数体 }

现在张三对象内容如下：

var zs = { 
  name: '张三',
  age: 20,
  hobby: ['HTML', 'HTTP', 'Linux'],
  startYear: 2023
}

此处的startYear表示入学年份，最终渲染到页面中时，希望输出学年: 入学年份 ~ 毕业年份，此时可以交给一个过滤器处理：

template.defaults.imports.graduate = function(value){
   return value + " ~ " + (value + 4)  
  }

过滤器graduate 会进行一个字符串拼接，虽然value是数字类型，但是中间的" ~ "是一个字符串，最终整个返回值就是一个字符串，毕业年份是入学年份的四年后。

在模板中，把startYear 输入到过滤器：

<script type="text/html" id="tpl">
  <p>姓名: {{name}}</p>
  <p>年龄: {{age}}</p>
  <ul>
    {{each hobby}} 
      <li> {{$value}} </li>
    {{/each}}
  </ul>
  <p>
    学年: {{ startYear | graduate }}
  </p>
</script>

此处{{ startYear | graduate }}就是在处理数据。

输出结果：

在这里插入图片描述

原理

其实模板引擎的原理非常简单，就是正则表达式匹配，随后替换元素值即可。

以art-template为例，其所有占位符格式都是{{}}，那么正则就可以写为：

let pattern = /{{([a-zA-Z]+)}}/

首先通过最外层的{{}}进行占位符得到匹配，内层一个()进行分组匹配，提取出具体的信息，[a-zA-Z]+表示提取任意多个字母。

比如对于字符串<div>{{name}}</div>，通过以上正则就可以得到name这个值。

var str = '<div>{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

var result = pattern.exec(str)
console.log(result)

输出结果：

在这里插入图片描述

可以看到，最后正则返回一个数组，第一个元素是匹配成功的字符串，第二个元素是提取出来的分组值。

当提取到变量名后，就要去对象中拿到对于的变量，并替换原先的占位符，替换通过replace方法完成：

'string'.replace('子串', '替换值')

比如说"helloworld".replace("world", "linux")，就会返回字符串"hellolinux"。

let obj = {
  name: "张三"
}

var str = '<div>{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], obj[patternResult[1]])
console.log(str)

patternResult[0]是被匹配的字符串，也就是{{name}}，patternResult[1]是提取到的分组，也就是name。只需要把原字符串str的{{name}}替换为obj['name']即可，也就是str.replace(patternResult[0], obj[patternResult[1]])。

输出结果：

在这里插入图片描述

这样就完成了元素的替换。

当整个字符串中有多个{{xxx}}，可以使用一个循环进行匹配：

let patternResult = null;
while (patternResult = pattern.exec(str)) {
	str = str.replace(patternResult[0], obj[patternResult[1]])
}

当pattern.exec匹配不到{{}}时，就会返回一个null，循环就会结束，整个模板字符串被完全替换为对象的值，最后得到一个可以直接渲染的html字符串。

标签：name,提交,表单,Ajax,html,template,var,模板
From： https://blog.csdn.net/fsdfafsdsd/article/details/143253876

相关文章

  • 数据库 表单运用
    一、进入数据库操作界面1、mysql-uroot-p敲回车，输入密码，进入数据库操作界面2、showdatabases查看所有的数据（如果没有数据库：创建数据库createdatabase库名称）3、use数据库名使用数据库4、showtables显示库中的所有表5、建表语句格式：create......
  • 三周精通FastAPI：14 表单数据和表单模型Form Models
     官网文档：表单数据-FastAPI表单数据¶接收的不是JSON，而是表单字段时，要使用 Form表单。fromfastapiimportFastAPI,Formapp=FastAPI()@app.post("/login/")asyncdeflogin(username:str=Form(),password:str=Form()):return{"username":user......
  • CSP-S可能出现的模板(手抄版)
    CSP-Srp+++++++++++ǰ����ʾ,��ƪ���´���ע��~��ѧ������intksm(inta,intb,intp){intret=1;while(b){if(b&1)ret=(ret*a)%p;a=(a*a)%p;b=b>>1;}returnret;}//b��λö�������λΪ1�������aÿ��a�˷�Lucasint......
  • pbootcms模板上线推广百度竞价后打不开网站出现404错误
    PbootCMSV3.2.5版本中为了增强安全性或优化URL结构，加入了对URL参数的严格判断。当URL中包含?但不符合特定条件（如/?tag=、/?page=、/?ext_）时，系统会自动返回404错误页面。这种做法虽然有助于防止一些非法请求，但也可能导致合法的请求被误判为无效，特别是对于那些依赖于其他查询参数......
  • CSP-S 可能出现的模板(非原创,各个地方整理得)
    CSP-Srp+++++++++++数据结构~01trie~intt[N*31][2],nv=1;voidbuild(intp,intd,intv){ boolflag=(v&(1<<d)); if(!t[p][flag])t[p][flag]=++nv; if(d)build(t[p][flag],d-1,v);}intquery(intp,intd,intv){ if(d<0)return0; boolflag=(v&am......
  • Tarjan连通性算法模板大整合
    更新日志前言由于Tarjan算法页面过多，这里统一做一个整合，后期可能还会加入或者更改这里的模板。另外的，这个页面只提供模板——以及链接，详细讲解点链接即可。强连通（有向图，储存每个节点属于的分量编号）intscnt;intscc[N],siz[N];intdcnt;intdfn[N],low[N];boolins[N......
  • C++之内存管理与模板初级
    内容介绍Ⅰ.C++内存管理1.C/C++内存分布2.C与C++动态内存管理方式对比2.1C中动态内存管理方式2.2C++中内存管理方式3.new和delete的底层实现原理(了解)Ⅱ.模板初阶1.模板介绍2.函数模板3.函数模板参数匹配原则4.类模板Ⅰ.C++内存管理1.C/C++内存分布intn1=1;......
  • 浅拷贝与深拷贝 以及嵌套和递归使用模板类
     1.浅拷贝和深拷贝——对象和类浅拷贝浅拷贝只复制对象的基本属性，而不复制引用类型的属性指向的对象，即只复制引用而不复制引用指向的对象在浅拷贝中，新对象与原始对象共享引用类型的属性指向的对象，即它们指向同一个对象。编译器提供的拷贝构造函数是浅拷贝，当一个对象修......
  • 一图胜千言，PPT中的数据分析模板样式
    PPT中数据可视化是一种将数据以图形或图表的形式展示出来的方法，它可以帮助观众更直观地理解数据所传达的信息。数据可视化是一个不断发展的领域，随着技术的进步，新的工具和方法不断出现，使得数据的呈现更加直观和互动。在笔格PPT，选择合适的样式模板便可直接制作图表，小编带来了各......
  • 网站修改意见文档模板？
    创建一个网站修改意见文档时，可以遵循以下模板结构，以确保信息清晰、全面且易于理解：网站修改意见文档1.文档基本信息文档标题:版本号:作者:日期:审核人:2.项目概述项目名称:项目背景:目标用户:主要功能:3.修改意见概览序号当前问题建议改进责任人预计完......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99