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" 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

$(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);
        }  
    });   
});