jQuery Ajax 操作函数温故而知新

4379次浏览

引子

今天准备对前段时间做的微信页面进行数据绑定,数据格式大多是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" id="a" /></div>
      <div><input type="text" name="b" value="2" id="b" /></div>       
      <div><input type="hidden" name="c" value="3" id="c" /></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" id="f" /> 
      </div>
      <div>
        <input type="submit" name="g" value="Submit" id="g" />
      </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.haorooms.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 操作函数有了更深的了解了不!

Tags: ajaxjquery

相关文章: