炫意html5
最早CSS3和HTML5移动技术网站之一

jQuery Ajax 操作函数温故而知新

引子

今天准备对前段时间做的微信页面进行数据绑定,数据格式大多是json格式的,还有对数据的搜索和查询。初步定的做法是先将数据缓存到本地,然后对本地的json数据进行查询,对于json数据的查询,我找到了一个JsonSQL的方法,就是用类似SQl的方式的方式查询json数据。【对于这种方法,今天稍微看了一下,很不错,但是还没有应用于实践,等后面再对JsonSQL做具体的介绍。】当我看jsonsql的时候,我发现用的是ajax的getJSON方法,对于jquery的getJSON方法及POST()还有GET()等等方法,我是了解的,但是没有经常的使用,因此有些生疏,所以,今天对jQuery Ajax 操作函数温故而知新一下!

jQuery Ajax,我常用的调用方法

             $.ajax({
'url': 'url.php',
'type':'get',//或者POST
'datatype':'json',//或者"jsonp",或者script等等
'data':{
q : q,
b : b,
v : v,
c : c
},
//'jsonp': 'jsonpcallback',有时候也用,在跨域调用的时候
'success':function(d){
console.dir(d);
},
'error':function(d){
console.dir(d);
},
});

我经常用上面这种方法进行ajax调用,这种方法很方便,可以说是打遍天下无敌手!

但是也有很多简单的调用方式,下面我介绍一下!

jQuery Ajax 其他调用方法

jQuery ajax – getJSON() 方法

这种方法相当于

$.ajax({
url: url,
data: data,
dataType: json,
success: callback
});

语法如下:

jQuery.getJSON(url,[data],[callback])
参数            描述
url         待载入页面的 URL 地址。
data     待发送 Key / value 参数。
callback    载入成功时执行的回调函数。

案例:

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery ajax – getScript() 方法

这个方法和上面的方法类似,相当于:

$.ajax({
url: url,
dataType: "script",
success: success
});

语法:

jQuery.getScript(url,[callback])
参数      描述
url            待载入 JS 文件地址。
callback    成功载入后执行的回调函数。

jQuery ajax – post() 方法

相当于ajax如下用法:

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

语法:

jQuery.post(url,[data],[callback],[type])
参数        描述
url             待载入页面的 URL 地址。
data             待发送 Key / value 参数。
callback     载入成功时回调函数。
type            返回内容格式,xml, html, script, json, text, _default。

用法如下:

$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

jQuery ajax – get() 方法

用法同post(),这里就不多解释了。

jQuery ajax – load() 方法

语法

load(url,[data],[callback])
参数       描述
url            待载入的 HTML 网页网址。
data            发送至服务器的 key/value 数据。在 jQuery 1.3 中也可以接受一个字符串了。
callback    载入成功时执行的回调函数。

用法:

$("#feeds").load("feeds.html");

load() 方法载入远程 HTML 文件代码并插入至 DOM 中。上面代码是加载feeds.html到id feeds中。

与上面的实例类似,但是以 POST 形式发送附加参数并在成功时显示信息:

$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("加载25条");
});

jQuery ajax – param() 方法

语法

jQuery.param(obj,traditional)
参数                     描述
obj                     要进行序列化的数组或对象。
traditional    是否使用传统的方式浅层进行序列化。

用法:

序列化一个 key/value 对象:

var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);

结果:

width=1680&height=1050

jQuery ajax – serialize() 方法

定义和用法:

serialize() 方法将表单内容序列化为字符串。

语法:

.ajaxStop([callback])
参数                 描述
callback       被调用的函数。

案例:

<form>
<div><input type="text" name="a" value="1" /></div>
<div><input type="text" name="b" value="2" /></div>
<div><input type="hidden" name="c" value="3" /></div>
<div><textarea name="d" rows="8" cols="40">4</textarea> </div>
<select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<div>
<input type="checkbox" name="f" value="8" />
</div>
<div>
<input type="submit" name="g" value="Submit" />
</div>
</form>

serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 < input>, < textarea> 以及 < select>。不过,选择

标签本身进行序列化一般更容易些:

$('form').submit(function() {
alert($(this).serialize());
return false;
});

输出标准的查询字符串:

a=1&b=2&c=3&d=4&e=5

关于jQuery Ajax 操作函数的更多用法,请查看:http://www.w3cschool.cn/jquery_ref_ajax.html

ajax jsonP 跨域调用

当我们要请求的地址不是我们本身网站的时候,就形成了跨域。端口不同、域名不同都可以引起跨域问题。ajax jsonp方式是解决跨域的一种,这个我在前端面试题目中提到过:http://www.xyhtml5.com/post/qianduan_mianshi ,关于跨域的其他解决方案,我有时间会整理一下!

下面介绍jsonp的跨域调用。

$(function(){
/*
//简写形式,效果相同
$.getJSON("url跨域地址",  {参数,要把jsonpcallback作为参数传到后端},
function(data){
//结构处理
},"jsonp");
*/
$.ajax({
type : "get/post",
url : "跨域地址",
dataType : "jsonp",//数据类型为jsonp
jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数【后台接受什么参数,我们就传什么参数】
success : function(data){
//结果处理
},
error:function(data){
console.log(data);
}
});
});  

温故而知新,不知道你对jQuery Ajax 操作函数有了更深的了解了不!

炫意HTML5 » jQuery Ajax 操作函数温故而知新

Java基础教程Android基础教程