码迷,mamicode.com
首页 > Web开发 > 详细

ajax - 基于jQuery的介绍

时间:2017-08-18 22:31:05      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:表示   content   json格式   app   false   load   相同   常用   服务器   


Ajax基础补充

XMLHttpRequest对象有以下属性和操作
属性:
onreadystatechange
readyState
status
操作:

jQuery的ajax操作,常用函数如下:

$.ajax([options]) //底层的ajax方法
$.get(url, [data], [fn], [type]) //基于get的ajax
$.post(url, [data], [fn], [type]) //基于post的ajax
load(url, [data], [callback]) //这个是对象调用的方法(上面的是全局方法),可以是get或post


上面4个函数相关参数的解释:

url:请求路径
data:向服务器提交的数据
fb/cllback:回调函数,有三个参数 function(resp, textStatus, xmlHttp),相当于xmlhttp.onreadystatechenge = function(){}
data:服务器返回的数据
info:返回的状态
xmlHttp:ajax引擎对象
注意:get和post中的回掉函数只有请求成功才会执行
type:返回的数据类型
options:json格式的参数集合



函数逐个介绍:

$.ajax([options])方法
该方法参数是一个json对象,对象中的参数以键值对形式存放,常用参数如下:

async:默认为true,表示异步,设置为false则表示请求同步(给予jQuery validate的ajax表单校验时需要设置为同步)
data:发送到服务器的数据,会自动转换为请求字符串格式,如果是get还会自动添加到url后面
dataType:预期服务器返回的数据类型,若不指定则根据服务器中返回的MIME类型(如application/json)自动判断
type:提交方式,get或post
url:请求地址
success:请求成功后的回调函数,格式为function(resp, textStatus, xmlHttp)
error:请求失败后的回调函数,格式为function(xmlHttp, textStatus, exception)
contentType:像服务器发送的数据类型,用于data是json串的时候


$.get(url, [data], [fn], [type])方法
get提交方式
回调函数格式为:function(resp, textStatus, xmlHttp)

$.post(url, [data], [fn], [type])方法
与get提交方法相同 只不过的提交方式是post

load(url, [data], [callback])

回调函数格式为:function(resp, textStatus, xmlHttp)

此方法是所有ajax操作方法中唯一对象调用的方法,其他都是全局方法
如果提交时携带了请求参数(json数据格式或key/value字符串),即data部分存在即为post提交,data部分不存在即为get提交
在将服务器返回的json格式的字符串转换成json格式对象时的格式是eval("("+json+")");
原因是:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,
所以必须强制性的将它转换成一种表达式,因此要添加额外的()

表单序列化问题

如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,
如果表单项比较多的话,想必又是一件很麻烦,很痛苦的事情,
此时我们可以通过jquery的表单序列化的操作将表单的数据拼接成提交的参数格式
即:name=value&name=value&name=value 或者 json格式对象

var res = $("表单的选择器").serialize(); //可以获得表单的请求


ajax - 基于jQuery的介绍

标签:表示   content   json格式   app   false   load   相同   常用   服务器   

原文地址:http://www.cnblogs.com/tommychok/p/7392377.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!