jquery中的ajax，模板引擎

2023-01-14 14:16| 来源: 网络整理| 查看: 265

JQuery中的AjaxJQueryAjax使用

JQuery作为最受欢迎的js框架之一,常见的Ajax已经帮助我们封装好了,只需要调用即可,更为详细的api文档可以查阅:w3cSchool_JQueryAjax

$.get()方法

使用get方法向服务器获取数据

参数列表|参数| 描述||:—:|:—:||url |必需。规定将请求发送的哪个 URL。||data |可选。规定连同请求发送到服务器的数据。||success(response,status,xhr) |可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象|dataType |可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型：”xml””html””text””script””json””jsonp”

格式化表单$(‘form’).serialize()

我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=18类似这样的格式,JQuery已经帮助我封装好了一个格式化数据的方法

语法:$(selector).serialize() 直接可以将form中拥有name属性的表单元素的字,进行格式化

示例代码:

123456789101112131415161718192021222324测试jq_serialize方法$(function(){$("#getFormInfo").on("click",function(){var info = $("#testForm").serialize()console.log(info);})}) $.post()方法

通过post的方式向服务器获取数据

参数列表:|参数 |描述||:—:|:—:||url |必需。规定把请求发送到哪个 URL。|data| 可选。映射或字符串值。规定连同请求发送到服务器的数据。|success(data, textStatus, jqXHR) |可选。请求成功时执行的回调函数。|dataType |可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

示例代码:

123$.post("01.post.php",data,function(backData){console.log(backData);}) $.ajax({}) 方法

$.ajax()方法相比于前面的方法,拥有更为自由的定制性,可以替换$.get(),$.post()方法

参数:

在w3cSchool_$.ajax_Api中,关于参数只有下列一个.实际使用中,传递的是一个对象参数描述 settings 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

示例代码:

这里演示的是常用的属性

12345678$.ajax({url:'01.php',//请求地址data:'name=fox&age=18',//发送的数据type:'GET',//请求的方式success:function (argument) {},// 请求成功执行的方法beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理error:function (argument) {console.log(argument);},//请求失败调用}) 模版插件模版引擎简介

我们在使用ajax请求数据时,返回的如果是一个JSON格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果.那么这个包装得过程有没有简单的方法呢?

假设有如下数据(javascript中)

12345var obj = {name:"fox",age:18,skill:"卖萌"};

希望包装为:

12345姓名:fox年龄:18爱好:卖萌

定义模板,替换: 其间需要我们使用对象替换的位置为部分,如果可以读取模板->传入对象->完成替换->返回html代码实现这样的步骤,那么就能够完成我们的模板操作了

12345姓名:年龄:爱好:

模版插件原理我们定义一段文本作为模板,读取文本,使用特殊的符号,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

定义正则表达式:想要匹配我们可以定义正则如下(javascript中)

1234567891011121314151617/*JS中的RegExp对象:创建创建方法1: var reg = new RegExp("正则")创建方法2: var reg = /正则/; 推荐使用这种使用:reg.exec(string) 可以检测字符串*//*正则含义以外的所有字符(至少1个)\s*:0个或多个空白字符%>:以%>结束*/var reg = /]+\S)\s*%>/;

基本使用定义好作为模板的文本使用正则表达式进行匹配替换即可

12345678910111213141516171819202122232425262728// 定义文本var str = '大家好，我叫，我今年，我的爱好为:';// 定义数据var data = {name: 'itcast',age: 10,skill:'打篮球'};// 快速的创建方法,好处,直接使用 \ 即可不需要考虑转义var reg = /]+\S)\s*%>/;// 返回的是一个对象var match = null;// 使用 while循环进行检查,知道没有匹配的内容while (match = reg.exec(str)){// 匹配到的字符串var mathString = match[0]// 子表达式匹配到的字符串var subString = match[1];// 打印文本内容console.log("循环中:"+str);// 替换字符串的内容var str = str.replace(mathString,data[subString]);match = reg.exec(str);}console.log("循环完毕:"+str); 常见的模板插件

BaiduTemplate(百度开发) ArtTemplate(腾讯开发) velocity.js(淘宝开发) Handlebars

ArtTemplate基本使用

模板引擎的用法大同小异,ArtTemplate由于性能优秀,这里我们演示ArtTemplate的用法

导入模板引擎: 将下载好的ArtTemplate导入到页面中定义模板:

123456789101112131415这样的语法是定义逻辑表达式这样的语法为输出表达式注意:这路的模板type='text'如果写成javascript会执行favouriteFood

读取模板,传入数据:

导入了模板引擎以后,我们可以使用template(模板id,数据);

1234// 调用模板引擎的方法var backHtml = template("templ01",data);// 返回值就是填充好的内容赏

谢谢你请我吃糖果

本文总阅读量次

【本文地址】

公司简介

联系我们