菜单

Jquery的Ajax技术使用方法_jquery_脚本之家www.2138.com:

2020年4月3日 - www.2138.com

Jquery的Ajax技术

一、Ajax概述

1.什么是同步,什么是异步

联合现象:客商端发送必要到服务器端,当服务器重临响应此前,客商端都处于等候
卡死状态
异步现象:顾客端发送伏乞到劳动器端,无论服务器是还是不是重临响应,客商端都足以随意做其余业务,不会被卡死

2.Ajax的运维原理

页面发起号召,会将乞求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交央求到
服务器端,在这里段时光里,客商端能够随性所欲进行自由操作,直到劳动器端将数据重回给Ajax引擎后,会触发你设置的事件,进而推行自定义的js逻辑代码完毕某种页面效果。

jquery是二个天时地利的js框架,自然对js原生的ajax举办了打包,封装后的ajax的操作方法更简短,功效更结实大,与ajax操作相关的jquery方法犹如下二种,但付出中平日使用的有二种:

二、JavaScript AJAX使用

js原生的Ajax其实正是环绕浏览器内停放的Ajax引擎对象开展学习的,要动用js原生的Ajax达成异步操作,有如下几个步骤:

1)创造Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
www.2138.com,4)发送乞请
5)选取响应数据

1)$.get(url, [data], [callback], [type])

三、json数据格式

json是一种与语言非亲非故的数据调换的格式,成效:

动用ajax举办前后台数据交流
活动端与服务端的数据沟通

json有三种格式:

1)对象格式:{“key1″:obj,”key2″:obj,”key3”:obj…}
2)数组/集结格式:[obj,obj,obj…]
例如:

user对象 用json数据格式表示
{“username”:”zhangsan”,”age”:28,”password”:”123″,”addr”:”北京”}

List 用json数据格式表示
[{“pid”:”10″,”pname”:”小米4C”},{},{}]

2)$.post(url, [data], [callback], [type])

四、jQuery的Ajax技术

jquery是五个js框架,自然对js原生的ajax实行了打包,封装后的ajax的操作方法更简单,功效更有力,与ajax操作相关的jquery方法有如下两种:[]表示可选

$.ajax([options])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])
支付中临时使用的有三种

1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
其中:

url:代表号令的劳务器端地址
data:代表号召服务器端的数额(能够是key=value方式也足以是json格式)
callback:表示服务器端成功响应所接触的函数(唯有正规成功再次来到才实施)
type:表示服务器端重返的数据类型(jquery会依据内定的项目自动类型转变)
常用的回来类型:text、json、html等
3)$.ajax( { option1:value1,option2:value2… } );

常用的option有如下:

async:是还是不是异步,默许是true代表异步
data:发送到服务器的参数,提出选用json格式
dataType:服务器端重返的数据类型,常用text和json
success:成功响应执行的函数,对应的系列是function类型
type:央求方式,POST/GET
url:乞求服务器端地址

区分:get有字节码乱码难点,post无字节码乱码难点(获取央求页面数据到后台,后台response.setContextType(“text/html;charset=UTF-8”卡塔尔国响应乱码难题还与原先同样)

url:代表呼吁的服务器端地址
data:代表倡议服务器端的数量(能够是key=value方式也能够是json格式)
callback:表示服务器端成功响应所接触的函数
type:表示服务器端重临的数据类型常用的回到类型:text、json、html等

假定type为json,并且服务器端再次回到的正是json格式字符串jq内部会帮大家机关转接,在回调函数中赢得的实参正是转账实现的js对象间接行使就能够。

参数的逐条可退换的,不过只要把data放在前面会冒出不能够传递数据的主题素材,所以并不是随便更改严俊依据jq文档中的顺序实行利用。

function get(){ $.get( "/web22-ajax/ajaxServlet2",//url {"name":"muzidigbig","age":22},//请求参数,json的数据格式 function{//请求成功后返回过来的参数 alert; }, "json" ); };//java只能是java代码,前端页面的代码只能转换成json对象response.getWriter().write("{"name":"muzi","age":22}");

3)$.ajax( { option1:value1,option2:value2… } );

常用的option有如下:

async:是不是异步,暗中认可是true代表异步

url:乞求服务器端地址

type:央求格局,POST/GET

data:发送到服务器的参数,提议选拔json格式

success:成功响应实践的函数,对应的项目是function类型,央求成功后获得的值会自动封装在此个函数的首先个参数中

error:退步响应施行的函数,对应的连串是function类型

dataType:服务器端重临的数据类型,常用text和json

beforeSend:function {},//
在发送央求以前调用,能够做一些认证之类的拍卖假若回到false能够裁撤本次ajax央求。

发送请求 $.click { $.ajax({ async:true, url:"向后台地址发送请求", type:'post',//请求的方式 data:{'name':'muzidigbig','age':'20'},//请求的数据 success:function  {//请求成功后返回的数据会封装在回调函数的第一个参数中 //通过backdata来获取所需要的数据 alert(backdata.name+backdata.age); }, error:function () {//响应不成功时返回的函数 console.log }, dataType:'json'//设置返回的数据类型 }) });

若有不足请多多指教!希望给您带给帮忙!

总结

上述便是那篇作品的全体内容了,希望本文的内容对我们的学习可能办事富有一定的参照学习价值,多谢我们对剧本之家的支撑。倘诺您想打听更加的多相关内容请查看上边相关链接

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图