AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2017-10-15 15:00 我要评论( )

我们都知道,当显示页面数据的时候我们需要进行刷新页面,但是有时候我们只想刷新局部的页面数据AJAX是一种异步请求可以进行局部刷新页面的工具原理是由JS实现,在

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

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



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






 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Django - Ajax分页

    Django - Ajax分页

    2017-10-15 17:02

  • [Java教程]JavaScript Ajax + Promise

    [Java教程]JavaScript Ajax + Promise

    2017-10-15 14:15

  • ArcGIS客户端开发学习笔记(一)—AJAX机制

    ArcGIS客户端开发学习笔记(一)—AJAX机制

    2017-10-15 10:01

  • 前端之ajax解析

    前端之ajax解析

    2017-10-13 16:02

网友点评