GVKun编程网logo

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法(锋利的jquery pdf)

13

本文将分享锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法的详细内容,并且还将对锋利的jquerypdf进行详尽解释,此外,我们还将为大家带来关于jQueryAjax实

本文将分享锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法的详细内容,并且还将对锋利的jquery pdf进行详尽解释,此外,我们还将为大家带来关于jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery、jQuery Ajax之$.get()方法和$.post()方法_jquery、jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法_jquery、Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结_jquery的相关知识,希望对你有所帮助。

本文目录一览:

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法(锋利的jquery pdf)

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法(锋利的jquery pdf)

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值。

在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法)

$.get()方法使用GET方式来进行异步请求。结构为:$.get(url [, data] [, callback] [, type])

$.get()方法参数解释如下:

参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中 callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 type(可选) String 服务器端返回内容的格式,包括xml、html、script、json、text和_default

$.post()方法。

$.post()和$.get()方法的结构和使用方式相同,不过它们之间仍然有以下区别:

  •  GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
  •  GET方式对传输的数据有大小限制(通常不大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)
  •  GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说可以避免这些问题
  •  GET方式和POST方式传递的数据在服务器端的获取也不相同。

 

$.getScript():jQuery提供了此方法来直接加载js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。

jQuery代码如下:

$(function () {
        $("#send").click(function () {
            $.getScript("test.js");
        });
})

与其他ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件载入成功后运行。

例如:想载入jQuery官方颜色动画插件(jquery.color.js),成功后给元素绑定颜色变化动画:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
        .block{width:80px;height:80px;background:#DDD;}
    </style>
    <title></title>
</head>
<body>

<button id="go">运行</button>
<div class="block"></div>

</body>

<script type="text/javascript">
    $(function () {
        $.getScript("jquery.color.js", function () {
            $("#go").click(function () {
                $(".block").animate({backgroundColor: ''pink''}, 1000)
                        .animate({backgroundColor: ''blue''}, 1000);
            });
        })
    })
</script>

</html>

 

$.getJson():该方法用于加载JSON文件,用法与$.getScript()相同。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>

<br/>
<p>
    <input type="button" id="send" value="加载"/>
</p>

<div  class="comment">已有评论:</div>
<div id="resText" >

</div>

</body>

<script type="text/javascript">
    $(function () {
        $(''#send'').click(function() {
            $.getJSON(''test.json'', function(data) {
                $(''#resText'').empty();
                var html = '''';
                $.each( data  , function(commentIndex, comment) {
                    html += ''<div><h6>'' + comment[''username''] + '':</h6><p>'' + comment[''content''] + ''</p></div>'';
                })
                $(''#resText'').html(html);
            })
        })
    })
</script>

</html>

test.json文件为:

[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

 

使用JSONP形式的回调函数来加载其他网站的JSON数据。例如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .para {
            width:100px;
            height:100px;
            margin:5px;
            border:0;
        }
    </style>
    <title></title>
</head>
<body>

<p>
    <input type="button" id="send" value="加载"/>
</p>

<div id="resText" >

</div>

</body>

<script type="text/javascript">
    $(function () {
        $(''#send'').click(function() {
            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                    function(data){
                        $.each(data.items, function( i,item ){
                            $("<imgpara''/> ").attr("src", item.media.m).appendTo("#resText");
                            if ( i == 3 ) {
                                return false;
                            }
                        });
                    }
            );
        })
    })

    /**
     *  JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript Callback的形式实现跨域访问
     *  上述的url地址并不能请求到数据,仅用作说明。
     * */
</script>

</html>

注意:

  • jQuery将自动把URL里的回调函数,例如"url?callback=?"中的后一个”?“替换为正确的函数名,以执行回调函数。
  • JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript Callback的形式实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本,因此许多通道都可以交换JSON消息。而由于同源策略的限制,开发人员不能在于外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用JSON和<script>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选。

$.ajax()方法时jQuery最底层的ajax实现。它的结构为:

$.ajax(options).该方法只有一个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,

常用参数列表为:

参数名称 类型 说明 url String (默认为当前页地址)发送请求的地址 type String 请求方式(post或get)默认为get。注意其他HTTP请求方法,如PUT何DELETE也可以使用,但仅部分浏览器支持 timeout Number 设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置 data Object或String 发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1", foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,jQuery将自动为不同值对应同一个名称。例如{foo:["bar1", "bar2"]}转换为&foo=bar1&foo=bar2 dataType String

预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下。

xml:返回XML文档,可用jQuery处理

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。

json:返回JSON数据

jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,jQuery将自动替换后一个”?“为正确的函数名,以执行回调函数。

text:返回纯文本字符串

beforeSend Function

发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数。

function(XMLHttpRequest) {

  this;//调用本次Ajax请求时传递的options参数

}

complete Function

请求完成后调用的回调函数(请求成功或失败时均调用)

参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatue){

  this;//调用本次Ajax请求时传递的options参数

}

success Function

请求成功后调用的回调函数,有两个参数。

(1)由服务器返回,并根据dataType参数进行处理后的数据

(2)描述状态的字符串

function(data, textStatus) {

  //data可能是xmlDoc、jsonObj、html、text等

  this;//调用本次Ajax请求时传递的options参数

}

error Function

请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

Ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown) {

  //通常情况下textStatus和errorThrown只有其中一个包含信息

  this;//调用本次Ajax请求时传递的options参数

}

global Boolean 默认为true。表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jquery.ajax()

一、$.ajax的一般格式

$.ajax({

   type: ''POST'',

   url: url ,

  data: data ,

  success: success ,

  dataType: dataType

});

登录后复制

二、$.ajax的参数描述

参数 描述

url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

三、$.ajax需要注意的一些地方:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

2.$.ajax只提交form以文本方式,如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

四、$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
  url:''productManager_reverseUpdate'',// 跳转到 action 
  data:{ 
       selRollBack : selRollBack, 
       selOperatorsCode : selOperatorsCode, 
       PROVINCECODE : PROVINCECODE, 
       pass2 : pass2 
  }, 
  type:''post'', 
  cache:false, 
  dataType:''json'', 
  success:function(data) { 
    if(data.msg =="true" ){ 
      // view("修改成功!"); 
      alert("修改成功!"); 
      window.location.reload(); 
    }else{ 
      view(data.msg); 
    } 
   }, 
   error : function() { 
     // view("异常!"); 
     alert("异常!"); 
   } 
});


//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
  var formParam = $("#form1").serialize();//序列化表格内容为字符串 
  $.ajax({ 
    type:''post'',   
    url:''Notice_noTipsNotice'', 
    data:formParam, 
    cache:false, 
    dataType:''json'', 
    success:function(data){ 
    } 
  }); 
} 


//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
   type:''post'', 
   url:''validatePwd2_checkPwd2&#63;password2=''+password2, 
   data:{}, 
   cache:false, 
   dataType:''json'', 
   success:function(data){ 
     if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
     { 
        textPassword2.html("<font color=''red''>业务密码不正确!</font>"); 
        $("#validatePassword2").val("pwd2Error"); 
        checkPassword2 = false; 
        return; 
      } 
   }, 
   error:function(){} 
}); 


//4.$.ajax拼接data的异步请求
$.ajax({  
  url:''<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action'',  
  type:''post'',  
  data:''merName=''+values,  
  async : false, //默认为true 异步  
  error:function(){  
    alert(''error'');  
  },  
  success:function(data){  
    $("#"+divs).html(data);  
  }
});
登录后复制

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和

delete也可以使用,但仅部分浏览器支持。

timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设

置。

async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。

如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等

待请求完成才可以执行。

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。

设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格

式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格

式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同

值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime

信息返回responseXML或responseText,并作为回调函数参数传递。

可用的类型如下:

xml:返回XML文档,可用JQuery处理。

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求

时(不在同一个域下),所有post请求都将转为get请求。

json:返回JSON数据。

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个

“?”为正确的函数名,以执行回调函数。

text:返回纯文本字符串。

beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义

HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参

数。

function(XMLHttpRequest){

this; //调用本次ajax请求时传递的options参数

}

complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。

参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this; //调用本次ajax请求时传递的options参数

}

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

(1)由服务器返回,并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //调用本次ajax请求时传递的options参数

error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错

误信息、捕获的错误对象(可选)。

ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this; //调用本次ajax请求时传递的options参数

}

contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认

为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。

提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的

dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){

//返回处理后的数据

return data;

}

global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局

ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。

服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。

该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如

{jsonp:''onJsonPLoad''}会导致将"onJsonPLoad=?"传给服务器。

username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。

processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度

来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM

树信息或者其他不希望转换的信息,请设置为false。

scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时

才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码:

 $(function(){
 
  $(''#send'').click(function(){
 
  $.ajax({
 
  type: "GET",
 
  url: "test.json",
 
  data: {username:$("#username").val(), content:$("#content").val()},
 
  dataType: "json",
 
      success: function(data){
 
      $(''#resText'').empty(); //清空resText里面的所有内容
 
      var html = '''';
 
      $.each(data, function(commentIndex, comment){
 
       html += '''' + comment[''username'']+ '':+ '''';
      });
 
       $(''#resText'').html(html);
 
       }
 
  });
 
       });
 
  });
登录后复制

顺便说一下$.each()函数:

$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

以上这篇jQuery Ajax 实例代码 ($.ajax、$.post、$.get)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

jQuery Ajax之$.get()方法和$.post()方法_jquery

jQuery Ajax之$.get()方法和$.post()方法_jquery

注意:$.get()和$.post()方法是jQuery中的全局函数。前面讲到的load()方式是对jQuery对象进行操作的。

1、 $.get()方法

  $.get()方法使用GET方式来进行异步请求。

  它的语法结构为:

  $.get( url [, data] [, callback] [, type] )

  $.get()方法参数解释如下表:

参数名称 类 型 说  明 url String 请求的HTML页的URL地址 data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中 callback(可选) Function 载入成功时的回调函数(只有当Response的返回状态时success才调用该方法)自动将请求结果和状态传递给该方法 type(可选) String 服务器端返回内容的格式,包括xml、html、script、json、text和_default

jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法_jquery

jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法_jquery

经过尝试,只需要在$.ajax中加入 contentType: "application/json; charset=utf-8"选项就可以了,这是因为在.net 3.5以后要对contentType进行检查,所以仅仅指定dataType的话.net就不会返回JSON了,那么我们的请求自然也就无法请求到JSON数据了。正确写法就是这样了:

复制代码 代码如下:

var url = "/Services/AccountService.asmx/UserExists";
var userName = $("#txtUserName").val();
$.ajax({
type: "POST",
url: url,
data: ''{userName:"''+userName+''"}'',
dataType: "json",
success: function (json) {
if (json.d == true) {
$("#submit").removeAttr("disabled");
return;
}
$("#submit").attr("disabled", "disabled");
}
});

更正后代码
复制代码 代码如下:

var url = "/Services/AccountService.asmx/UserExists";
var userName = $("#txtUserName").val();
$.ajax({
type: "POST",
url: url,
data: ''{userName:"''+userName+''"}'',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (json) {
if (json.d == true) {
$("#submit").removeAttr("disabled");
return;
}
$("#submit").attr("disabled", "disabled");
}
});

但是在使用$.get、$.getJSON、$.post时确怎么也得不到JSON数据了,写法如下:
$.get代码
复制代码 代码如下:

var url = "/Services/AccountService.asmx/UserExists";
var userName = $("#txtUserName").val();
$.get(
url
, { userName: userName }
, function (json) {
if (json.d == true) {
$("#submit").removeAttr("disabled");
return;
}
$("#submit").attr("disabled", "disabled");
},"json");

$.getJSON代码
复制代码 代码如下:

var url = "/Services/AccountService.asmx/UserExists";
var userName = $("#txtUserName").val();
$.getJSON(
url
, { userName: userName }
, function (json) {
if (json.d == true) {
$("#submit").removeAttr("disabled");
return;
}
$("#submit").attr("disabled", "disabled");
});

$.post代码
复制代码 代码如下:

var url = "/Services/AccountService.asmx/UserExists";
var userName = $("#txtUserName").val();
$.post(
url
, { userName: userName }
, function (json) {
if (json.d == true) {
$("#submit").removeAttr("disabled");
return;
}
$("#submit").attr("disabled", "disabled");
},''json'');

用HttpWatch查看请求返回的数据如下:
复制代码 代码如下:


false

看一下jQuery.extend中有关代码:
jQuery.extend
复制代码 代码如下:

jQuery.extend({
get: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
},
getScript: function( url, callback ) {
return jQuery.get(url, null, callback, "script");
},
getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
},
post: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = {};
}
return jQuery.ajax({
type: "POST",
url: url,
data: data,
success: callback,
dataType: type
});
}
});

原因就是.net 3.5以后要对contentType进行检查,如果不为json的话,就不会返回json,而get、getJSON、post扩展都再次调用了ajax,但是只传了dataType参数,.net 3.5在检查contentType时发现其不是json,便返回了xml.

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结_jquery

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结_jquery

详细解读Jquery各Ajax函数:
$.get(),$.post(),$.ajax(),$.getJSON()

一,$.get(url,[data],[callback])

说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数。

而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明

复制代码 代码如下:

$.get("data.php",$("#firstName.val()"),function(data){

$("#getResponse").html(data); }//返回的data是字符串类型

);


二,$.post(url,[data],[callback],[type])

说明:这个函数跟$.get()参数差不多,多了一个type参数,type为请求 的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就 和$.get()返回的格式一样,都是字符串的

复制代码 代码如下:

$.post("data.php",$("#firstName.val()"),function(data){

$("#postResponse").html(data.name);

},"json"//设置了获取数据的类型,所以得到的数据格式为json类型的

);


三,$.ajax(opiton)

说明:$.ajax()这个函数功能强大,可以对ajax进行许多精确的控制,需要详细说明的请参照相关资料

复制代码 代码如下:

$.ajax({

url: "ajax/ajax_selectPicType.aspx",

data:{Full:"fu"},

type: "POST",

dataType:''json'',

success:CallBack,

error:function(er){

BackErr(er);}

});


四,$.getJSON(url,[data],[callback])
复制代码 代码如下:

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){

$("#getJSONResponse").html(jsonData.id);}//无需设置,直接获取的数据类型为json,
所以调用时需要使用jsonData.id方式

);


When Ajax meets jQuery 基于AJAX的应用现在越来越多,而对于前台开发人员来说,直接和底层的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封装了 JavaScript,肯定已经考虑过AJAX应用的问题。的确,如果用jQuery写AJAX会比直接用JS写方便N倍。(不知道用jQuery长了, 会不会丧失对JS的知识了……) 这里假设大家对jQuery语法已经比较熟悉,来对ajax的一些应用作一些总结。

载入静态页面

load( url, [data], [callback] );
url (String) 请求的HTML页的URL地址
data (Map)(可选参数) 发送至服务器的 key/value 数据
callback (Callback) (可选参数) 请求完成时(不需要是success的)的回调函数

load()方法可以轻松载入静态页面内容到指定jQuery对象。

复制代码 代码如下:

$(''#ajax-div'').load(''data.html'');

这样,data.html的内容将被载入到ID为ajax-div的DOM对象之内。你甚至可以通过制定ID来实现载入部分内容的Ajax操作,如:
复制代码 代码如下:

$(''#ajax-div'').load(''data.html#my-section'');

实现GET和POST方法

get( url, [data], [callback] )
url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)

很显然这是一个专门实现GET方式的函数,使用起来也相当的简单

复制代码 代码如下:

$.get(''login.php'', {
   id      : ''Robin'',
   password: ''123456'',
   gate    : ''index''
  }, function(data, status) {
   //data为返回对象,status为请求的状态
   alert(data);
   //此时假设服务器脚本会返回一段文字"你好,Robin!",
那么浏览器就会弹出对话框显示该段文字
   alert(status);
   //结果为success, error等等,但这里是成功时才能运行的函数
  });

post( url, [data], [callback], [type] )

url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据,以 Key/value 的键值对形式表示
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)
type (String) (可选参数) 请求数据的类型,xml,text,json等

同样是jQuery提供的一个简便函数,其实用法

复制代码 代码如下:

$.post(''regsiter.php'', {
   id:''Robin'',
   password: ''123456'',
   type:''user''
  },function(data, status) {
   alert(data);
  }, "json");

事件驱动的脚本载入函数:getScript()

getScript( url, [callback] )
url (String) 待载入 JS 文件地址
callback (Function) (可选) 成功载入后回调函数

getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨 域载入JS文件(神奇……?!)。这个函数的意义是巨大 的,它可以很大程度的缩减页面初次载入的代码量,因为你可以根据用户的交互来载入相应的JS文件,而不必在页面初始化的时候全部载入。

复制代码 代码如下:

$.getScript(''ajaxEvent.js'', function() {
   alert("Scripts Loaded!");
   //载入ajaxEvent.js,并且在成功载入后显示对话框提示。
  });

构建数据通讯的桥梁:getJSON()

getJSON(url,[data],[callback])
url (String) 发送请求地址
data (Map) (可选) 待发送 Key/value 参数
callback (Function) (可选) 载入成功时回调函数。

JSON是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语 言,并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式,让程序执行回调函数X。

复制代码 代码如下:

$.getJSON(''feed.php'',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此处json就是远程传回的json对象,假设其格式如下:
    //{''images'' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

更底层的ajax()函数
虽然get()和post()函数非常简洁易用,但是对于更复杂的一些设计需求还是无法实现,比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数:ajax()。

ajax( options )
ajax()提供了一大票参数,所以可以实现相当复杂的功能。

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }

cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。

参数: XMLHttpRequest 对象,成功信息字符串。

function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息
返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

“xml”: 返回 XML 文档,可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息;包含 script 元素。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,

如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。

这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,

如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。

使用 HTTP 包 Last-Modified 头信息判断。

processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)

以配合默认内容类型 “application/x-www-form-urlencoded”。

如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success Function

请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

你可以指定xml、script、html、json作为其数据类型,可以为beforeSend、error、sucess、complete等状态设置 处理函数,众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中,我们用ajax()来调用一个XML文档:

复制代码 代码如下:

$.ajax({
    url: ''doc.xml'',
    type: ''GET'',
    dataType: ''xml'',
    timeout: 1000,
    error: function(){
        alert(''Error loading XML document'');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了,你可以用find()、next()或XPath等方法在里面寻找节点,
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件
前面讨论的一些方法都有自己的事件处理机制,从页面整体来说,都只能说是局部函数。jQuery提供了AJAX全局函数的定义,以满足特殊的需求。下面是jQuery提供的所有函数(按照触发顺序排列如下):

ajaxStart
(全局事件) 开始新的Ajax请求,并且此时没有其他ajax请求正在进行
beforeSend
(局部事件) 当一个Ajax请求开始时触发。如果需要,你可以在这里设置XMLHttpRequest对象
ajaxSend
(全局事件) 请求开始前触发的全局事件
success
(局部事件) 请求成功时触发。即服务器没有返回错误,返回的数据也没有错误
ajaxSuccess
全局事件全局的请求成功
error
(局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数
ajaxError
全局事件全局的发生错误时触发
complete
(局部事件) 不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件
ajaxComplete
全局事件全局的请求完成时触发
ajaxStop
(全局事件) 当没有Ajax正在进行中的时候,触发
局部事件在之前的函数中都有介绍,我们主要来看看全局事件。对某个对象进行全局事件监听,那么全局中的AJAX动作,都会对其产生影响。比如,当页面在进行AJAX操作时,ID为”loading”的DIV就显示出来:

复制代码 代码如下:

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应,而不需要为每个AJAX请求独立设置。有必要指出,全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions,其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身;第二个是XHR对象;第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况:
复制代码 代码如下:

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然,第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时,你可以将global的值设为false,以将此请求独立于AJAX的全局事件。
复制代码 代码如下:

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数,你会用上ajaxSetup()函数。例如,将所有AJAX请求都传递到request.php,;禁用全局方法;强制用POST方法传递:
复制代码 代码如下:

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

一些你不得不知道的方法
写AJAX肯定离不开从页面获取相应的值。在这里简单列举一些方法:

val()
val()函数可以返回表单组建的值,例如任何种类input的值。配合选择符操作,你可以轻易获取选项组、输入框、按钮等元素的值。

复制代码 代码如下:

$("input[name=''info'']:text").val();
//返回名字为info的文本框的值
$("input[name=''pass'']:password").val();
//返回名字为pass的密码框的值
$("input[name=''save'']:radio").val();
//返回名字为save的单选项的值
//以此类推

serialize()

serialize函数可以帮你把表单对象的所有值都转换为字符串序列。如果你要写GET格式的请求,这个就非常方便了。
serializeArray()和serialize()类似,只不过它返回的是JSON对象。

关于锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法锋利的jquery pdf的问题就给大家分享到这里,感谢你花时间阅读本站内容,更多关于jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery、jQuery Ajax之$.get()方法和$.post()方法_jquery、jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法_jquery、Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结_jquery等相关知识的信息别忘了在本站进行查找喔。

本文标签: