做一个公司的网站:JS类库Jquery(二):优雅的使用JQuery写Ajax完成
本文摘要: Jquery虽然属于比较老的技能,可是相较于原生的JS写起来仍是反便利很多,现在盛行使用VUE等开源的框架,可是这并不是无妨碍我们进行Jquery的学习,前端程序员生长的过程当中Jquery是有必要了解的类库之一,后端程序员喜欢简略粗犷,因

Jquery虽然属于比较老的技能,可是相较于原生的JS写起来仍是反便利很多,现在盛行使用VUE等开源的框架,可是这并不是无妨碍我们进行Jquery的学习,前端程序员生长的过程当中Jquery是有必要了解的类库之一,后端程序员喜欢简略粗犷,因此Jquery更受他们的欢迎.今天主要聊聊Jquery写Ajax进行异步改写.上一篇JQ入门传送.

一、jQuery使用Ajax

想要了解jQuery怎么使用Ajax,并且体会到它所带来的便利性,那么就得了解原始的Ajax是怎么编写的,是怎样的繁琐,然后和Jquery的代码进行比照,才会有所悟。

1.1、什么是Ajax?(顺带提一下)

全名:Asynchronous Javascript And Xml[异步javascript和xml],

同步和异步原理图

同步就是阅读器发送一个请求到效劳器端,网站地址会改变,页面会被从头加载到新的页面。如图

异步就是阅读器发送一个请求到效劳器端,网站地址不会改变,并且页面只是部分改写数据,可以接降服务器返回的数据,假如需要完成这样一个异步的过程,就需要使用Ajax技能,依靠Ajax引擎(XMLHttpRequest),原理如图

Ajax是什么现在就应该知道了,看上面说明异步的原理就懂了,总结一句话,Ajax使用异步的方式从阅读器端发送请求,请求效劳器端资源,并取得内容的一种技能。

1.2、原始Ajax的用法。

假如编写原始Ajax,那么就要总的分为4步,如下图

第一步:获取Ajax引擎

第二步:通过Ajax引擎执行回调函数,用来接降服务器端返回回来的数据。

第三步:Ajax引擎创建与效劳器端的连接

第四步:发送请求到效劳器,并且顺带将数据传输以前

总结:留意第三步和第四步中post请求和get请求的差异,假如是post请求,则需要加第三步中的65行代码,并且所传输到效劳器端的请求参数有必要放在第四步的73行代码中。假如是get请求的话,请求参数就直接放在第三步的62行代码中(参考第三步的56行解释),并且第三步中的65行代码就不需要了,还有第四步中的73行代码就不需要带请求参数以前,参考70.71的注释。

粘帖一份Ajax发送请求,并接降服务器端的数据的代码,供参考。谢谢



<%--

--%>
用户名:

密码:



1.3、jQuery使用Ajax

1.3.1、Ajax请求

第一层,最原始层,$.ajax ,一般不使用,完成更强壮功用时需要使用。例如:假如犯错了,给出提示

第二层,load、$.get 、$.post 开发中常使用用于处理ajax

第三层,$.getJSON $.getScript 优化辅助

一行代码搞定。可是jQuery使用Ajax有很多种用法,现在逐个来介绍。

1、load的用法

有必要在jQuery对象上触发函数,发送ajax请求

格局:load(url, [data], [callback])

url:请求途径

data:请求参数。参数格局为JSON

假如有参数,将是POST请求

假如没有参数,将是GET请求

callback:成功之后回调,具有三个参数

第一个参数:返回值(通常是json,看返回的是什么)

第二个参数:状态,其值多是succuss,error,notmodify,timeout

第三个参数:ajax引擎XMLHttpRequest

实例:

OneServlet:效劳器端呼应

客户端发送ajax请求

 $(function(){
$("input").click(function(){
var url = "/jQuery_test/OneServlet";//请求效劳器端地点
/*
load(url, [data], [callback])
有data,所所以post请求
callback中有一个参数,那么就是其返回值对象,返回值类型是什么,
取决于效劳器返回的是什么,假如是json数据,那么需要通过21行
代码进行转换。
*/
var data = {"username":"jack"};
$(this).load(url,data,function(data){
//需要手动转成json对象
var jsonData = eval("("+data+")");
alert("成功" + jsonData.info);
});
});
});

2、$.get方式

发送的就是get请求

格局:jQuery.get(url, [data], [callback], [type])

前三个参数和load方式一样

type:返回内容格局,xml, html, script, json, text, _default(默许为json格局)

实例:

效劳器端

客户端

$( function(){
$("input").click(function(){
var url = "/jQuery_test/OneServlet";//请求效劳器端地点
/*
jQuery.get(url, [data], [callback], [type])
*/
var params = {"username":"jack"};
//2 $.get 取得数据为json对象
// * 当发送数据位字符串时,通过第四个参数设置类型
// * 效劳器端可以通过 MIME类型 确定发送JSON数据
$.get(url,params,function(data){
alert(data.success);
},"json");
});
});

3、$.post方式

跟$.get完全类似。

发送post请求

格局:jQuery.post(url, [data], [callback], [type])

不做解释。一样的。

4、$.ajax方式

底层原始ajax请求方式,犯错了,给出提示

常用格局:jQuery.ajax(settings); 使用json格局设置多项数据

看实例就懂了。

效劳器端:雷同,不写了。

客户端

 //4 $.ajax
// * async 设置是否异步,true:表明异步(ajax)
// * type 设置请求方式。例如:get、post
// * url 设置请求途径
// * data 请求参数
// * dataType 设置数据转换类型,例如:xml, html, script, json
// * success 成功回调
// * error 过错回调
$.ajax({
"async":true,
"type":"POST",
"url":url,
"data":params,
"success":function(data){
alert(data);
},
"error" : function(){
alert("过错");
}
});

1.3.2、表单序列化

serialize() 将表单中所有内容转成字符串

所有内容:有name,有值(非空)--文本稀有据,单选多选选中,下拉列表选中等

字符串:key=value&key=value&....

应用场景:$.get,当get请求时,将所有表单元素的内容都发送到效劳器端时,不用一个一个拼接,直接使用该函数就搞定了。

serializeArray()将表单中所有内容转成json数组

serialize()例子

核心代码。

表单代码如下

表单
































密码
性别


喜好
抽烟
喝酒
烫头
我的照片
学历









布告信息



未满18慎进


成果如图

看打印的成果,用&拼接而成,就是在get请求参数时放在url后边的格局,所以该应用场景是在$.get时。

serializeArray()实例。

成果

二、总结

温习了一下什么是Ajax,原始的Ajax的编写(4步),然后使用jQuery对象来编写ajax(一行代码搞定);使用jQuery的话,要留意效劳器端返回json数据时,json数据格局要正确。回绝过错的编写格局。比如"{'xx':'yy'}"或者"{'xx':xx}"这两种都是过错的格局,

可是在返回的是字符串时,能够使用"{'XX':XX"}",然后在页面使用eval进行转换即可。

下一节会说明一下javascript的跨域数据传输问题(原始方法完成和使用jQuery完成)

本文转载于博客园续杯凉茶的博客


【免责声明】本文仅代表作者或发布者个人观念,不代表(www.lmnkf.cn)及其所属公司官方发声,对文章观念有疑义请先联络作者或发布者自己修正,若内容触及侵权或违法信息,请先联络发布者或作者删除,若需我们协助请联络平台管理员,Emailcxb5918(本平台不支撑其他投诉反馈渠道,谢谢合作)。若需要学习以上相关常识请到巨推学院观看视频教程,网站地址www.tsllg.cn。

相关内容