JQuery 实现AJAX异步请求 的基本用法

2017-10-14 08:24:13来源:CSDN作者:qishubiao人点击

分享

我们都知道,当显示页面数据的时候我们需要进行刷新页面,但是有时候我们只想刷新局部的页面数据

AJAX 是一种异步请求可以进行局部刷新页面的工具

原理是由JS实现,在这里不进行讲解,只说明JQuery实现AJAX进行局部刷新

JQuery底层是由JS封装的,所以还是JS做的,只是JQuery把它简化了,JS写起来太麻烦有兼容性问题


JQuery版本:

第一种方式 get:

这里有四个参数url,data,callback,type

$.get(

url,请求的资源路径

data,提交的请求参数 "username=u123456&password=123456"

function,回调函数 function(data){ alert(data); } data:是后台响应的数据

type响应的数据类型,默认为String普通字符串,(String,xml, html, script, json, text)

);

这里的四个参数的顺序不可互换,type可以省略不写默认为String字符串

在使用这种方式接受JSON数据时需要写下type类型为json

例:

$.get(

"${pageContext.request.contextPath}/LoginServlet",

"username=u123456&password=123456",

function(data){//这里的data是响应回来的数据,加了json类型,这里的data就是一个JSON对象了

alert(data.name);

},

"json"//当响应的数据是JSON数据时需要写

);

第二种方式 post

$.post(

"${pageContext.request.contextPath}/LoginServlet",

"username=u123456&password=123456",

//这里是以普通参数的形式,json格式传输参数   {"username":"u123456","password":"123456"}

function(data){//这里的data是响应回来的数据,加了json类型,这里的data就是一个JSON对象了

alert(data.name);

},

"json" //当响应的数据是JSON数据时需要写

);

可以看出,post和get在书写上没有任何区别,只是换个名字,但是在浏览器传输数据时是不一样的,

顾名思义,get和post在传输数据时仍然是按照我们之前的认识get方式还是参数加在请求路径?的后面,

post方式是开启一个传输流,当前在地址栏上是看不出来的,因为都不会改变


关于请求参数中中文乱码说明:

在之前普通的get和post 请求中会有中文乱码问题,该问题原理和解决方法已经在之前的文章中说明详细.

这里主要说明一下$.post方式

在JQuery中已经对$.post进行了乱码的解决,也就是说在使用$.post请求提交数据时不用处理乱码

也就是不需要request.setCharacterEncoding("utf-8");当然加上也不会有错

在之前的解决方法中get的解决方法可以一同解决get和POST方式的乱码问题,但是在这里的$.POST中

原来的get解决乱码的方式就不能用了,反而不能正确读取中文,

在这里请阅读之前我专门对乱码原理的讲解 : 点击打开链接


但是$.get还是需要我们自己手动进行乱码的解决,get 方式的乱码解决相对复杂,还是请参阅我之前的讲解




第三种方式 ajax

$.get和$post的底层都是由$.ajax实现,$.get和$.post相对于$.ajax使用比较简单,但是$.ajax的功能更加多更强大

$.ajax里面的参数也更多,导致使用起来很不方便,由于我们平时只使用简单的请求功能,

$.get和$.post已经能够满足我们的需求, $.ajax也比较复杂,之后另写一篇专门介绍$.ajax



(以上只是基本使用,请大神们多多评论指教)






最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台