搜索

首页 >web前端 >js教程 >jQuery中ajax()方法的详细介绍

jQuery中ajax()方法的详细介绍

黄舟
黄舟原创
2017-07-27 16:25:041376浏览

$.ajax()方法：

*  发送data主要有3种方式
*  1.json 数组(推荐1)
*  2.url拼接
*  3.表单的序列化serialize(推荐2)

 

(1)json 数组(推荐1)


<span style="font-size: 16px;"><strong><span style="color: #000000;">$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};
    var eeorFunction = function(){alert("发生异常")};
    
    $.ajax({
          url:&#39;B&#39;,//目标为Servlet B发送请求地址
          type:&#39;GET&#39;,/*访问Servlet B请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。*/
          date：myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
       　 success:myFunction,//成功后的回调函数，result为服务器返回的内容
       　 error:errorFunction,
       　 timeout:2000<br/><br/>　　　　　　/*<br/>　　　　　　　　$.ajax()以上7个方法都是常用方法。<br/>　　　　　　*/
    });
    }
    $("#img").click(myClick);
});         

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
    　　<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="xiaoming"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>
    　　<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="img"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="img/1.png"</span><span style="color: #0000ff;">></span> 　　<span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></strong></span>

(2)url拼接

$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};

    /*var eeorFunction = function(){alert("发生异常")};*/
　　　　var errorFunction = function(XMLHttpRequest,textStatus){
　　　　//alert(&#39;发生错误&#39;);
　　　　if (XMLHttpRequest.status==404){
　　　　alert(&#39;找不到服务器[404]&#39;);
　　　　} else if(XMLHttpRequest.status==500){
　　　　alert(&#39;服务器忙，请稍后再试[500]&#39;);
　　　　}else{
　　　　alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
　　　　}
　　　}　
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。*/
          date：myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
       　 success:myFunction,//成功后的回调函数，result为服务器返回的内容
       　 error:errorFunction,
       　 timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
    　　<input id="userName" name="userName"value="xiaoming"><br>
    　　<img id="img" src="img/1.png"> 　　

          </form></body>

(3)　表单的序列化serialize(推荐2)

$(function(){

　　　　var kk = $("#userName").serialize();
　　　　var tt = $("#frm1").serialize();
　　　　//alert(t    //var myClick = function    //var userName = $().val();
  //var myDate = {userName:usrName};    

     var myFunction = function(result){alert(result)};
    /*var eeorFunction = function(){alert("发生异常")};*/
　　　var errorFunction = function(XMLHttpRequest,textStatus){
　　　　//alert(&#39;发生错误&#39;);
　　　　if (XMLHttpRequest.status==404){
　　　　alert(&#39;找不到服务器[404]&#39;);
　　　　} else if(XMLHttpRequest.status==500){
　　　　alert(&#39;服务器忙，请稍后再试[500]&#39;);
　　　　}else{
　　　　alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
　　　　}
　　　}　
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。*/
          date：myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
       　 success:myFunction,//成功后的回调函数，result为服务器返回的内容
       　 error:errorFunction,
       　 timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
    　　<input id="userName" name="userName"value="xiaoming"><br>
　　　　<input id="sex" name="sex" value="男"><br>
　　　　<img id="img" src="img/1.png"> 　　</form></body>

以上是jQuery中ajax()方法的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：jQuery如何获取table中td标签的详解下一篇：JavaScript中关于forEach与each的使用详解

相关文章

查看更多