Jquery重新学习之八[Ajax运用总结B]

作者：靖憐兵役_523 | 来源：互联网 | 2023-02-02 07:14

上一篇简单介绍普通javascript以及Jquery的AJAX方法，其中Jquery.ajax()是功能比较强悍的底层方法，可以更多地关注实现过程中的细节；除Jquery.ajax()方法外，Jqu

上一篇简单介绍普通Javascript以及Jquery的AJAX方法，其中Jquery.ajax()是功能比较强悍的底层方法，可以更多地关注实现过程中的细节；除Jquery.ajax()方法外，Jquery还提供其它几个比较简单但作用有限的方法；包含Jquery全局函数Jquery.get()、Jquery.post()、Jquery.getJSON()、Jquery.getScript()和load()方法；

1：Jquery.get(url,[data],[callback],[type]) 通过远程HTTP GET请求载入信息，简单的GET请求功能以取代复杂Jquery.ajax()中的GET方式，如果需要在出错时执行函数，请使用Jquery.ajax()；其中参数如下：url:待载入页面的URL地址。data:待发送 Key/value 参数（可选）。callback:载入成功时回调函数（可选）。type:返回内容格式，xml, html, script, json, text, _default（可选）。

实例代码：

    
    
    


    class="divFrame">
         class="divTitle">
              姓名：
              "txtName" type="text" class="txt" />
              "Button1" type="button" 
                     class="btn" value="请求数据" />
         
         class="divContent">
              "divTip">
         
    



其中UseInfo.aspx页面代码如下：

    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
    string strHTML = ""; //初始化保存内容变量
    if (strName == "小明")
    {
        strHTML += "姓名：小明
";
        strHTML += "性别：男
";
        strHTML += "邮箱：123@163.com";
    }
    strHTML += "";
    Response.Write(strHTML);

2：Jquery.post(url,[data],[callback],[type]) 通过远程HTTP POST请求载入信息，简单的GET请求功能以取代复杂Jquery.ajax()中的POST方式，全局函数Jquery.post（）跟Jquery.get()在本质上没有太大的区别，所不同的是，Get方式适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风危；Post方式就不会存在这两方面的不足；，如果需要在出错时执行函数，请使用Jquery.ajax()；其中参数如下：url:待载入页面的URL地址。data:待发送 Key/value 参数（可选）。callback:载入成功时回调函数（可选）。type:返回内容格式，xml, html, script, json, text, _default（可选）。

实例代码：

    
    
    


   class="divFrame">
         class="divTitle">
              姓名：
              "txtName" type="text" class="txt" />
              <select id="selSex" color: #800000;">"height:22px;margin-right:3px">
                 
                 
                 
              select>
              "Button1" type="button" 
                     class="btn" value="请求" />
         
         class="divContent">
              "divTip">
         
    




其中User_Info.aspx代码如下：


    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
    string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符
    string strHTML = ""; //初始化保存内容变量
    if (strName == "小明" && strSex=="男")
    {
        strHTML += "姓名：小明
";
        strHTML += "性别：男
";
        strHTML += "邮箱：345@163.com";
    }
    strHTML += "";
    Response.Write(strHTML);

3：jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。其方法可以专门快速获得JSON文件的内容，其中参数如下：url:待载入页面的URL地址。 data:待发送 Key/value 参数（可选）。callback:载入成功时回调函数（可选）。

实例如下：

    
    
    


   class="divFrame">
         class="divTitle">
              "Button1" type="button" 
                     class="btn" value="获取数据" />
         
         class="divContent">
              "divTip">
         
    





其中UserInfo.json文件如下：

[
  
{
    "name": "小明",

     "sex": "男",
   
     "email": "344@163.com"
  },
 
{
    "name": "小丽",
    
     "sex": "女",
    
     "email": "34@163.com"
  }

]

4：jQuery.getScript(url, [callback]) 通过 HTTP GET 请求载入并执行一个 Javascript 文件，jQuery.getScript（）不仅可以像加载页面片段一样轻松地注入脚本，而且所注入的脚本会自动执行，大大提高了页面的执行效率。其中参数如下：url:待载入 JS 文件地址。callback:成功载入后回调函数（可选）。

实例代码（把数据存放在JS的数组中，加载JS文件，输出数组的内容）：

    
    
    


   class="divFrame">
         class="divTitle">
              "Button1" type="button" 
                     class="btn" value="获取数据" />
         
         class="divContent">
              "divTip">
         
    




其中UserInfo.js代码如下：

var data = [
  {
      "name": "小明",
      "sex": "男",
      "email": "333@163.com"
  },
  {
      "name": "小丽",
      "sex": "女",
      "email": "li@163.com"
  }
];

var strHTML = "";
$.each(data, function() { 
    strHTML += "姓名：" + this["name"] + "
";
    strHTML += "性别：" + this["sex"] + "
";
    strHTML += "邮箱：" + this["email"] + "";
})
$("#divTip").html(strHTML);

5：load(url, [data], [callback])方法与上面其四个不同的它不是全局函数，载入远程 HTML 文件代码并插入至 DOM 中，其中参数如下：url:待装入 HTML 网页网址。data:发送至服务器的 key/value 数据，在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回调函数。注意：参数url还可以用于过滤页面中的某类别的元素，如代码"$. ('#divTip').load("b.html .divContent")",则表示获取页面b.html中类别名为"divContent"的全部元素；因为浏览器在获得数据时经常会有缓存，所以在请求时可以增加一个时间的参数避开这个问题："b.html?date="+Date();

实例代码：

    
    
    


   class="divFrame">
         class="divTitle">
              "Button1" type="button" 
                     class="btn" value="获取数据" />
         
         class="divContent">
              "divTip">
         
    




其中b.html代码如下：

class="clsShow">姓名：小明
性别：男
邮箱：354@163.com