jquery ajax定義與用法實例詳解-js教程-PHP中文網

定義和用法

ajax() 方法透過 HTTP 請求載入遠端資料。

此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的彈性。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。

注意：所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。

jQuery Ajax在web應用程式開發中很常用，它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法，下面我來給各位同學介紹介紹。

我們先從最簡單的方法看起，處理複雜的ajax請求時，jQuery使用jQuery.ajax()方法進行處理。在jQuery中有一些簡單的方法，它對jQuery.ajax()方法進行了封裝，使得我們在處理一些簡單的Ajax事件時，不需要使用jQuery.ajax()方法，其中有些方法在之前的文章已經出現過了，相信大家很快就能掌握。

執行一般Ajax請求的方法

1.load() 載入遠端資料到選取的元素中

<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $(&#39;#myDiv&#39;).load(&#39;/jquery/test.txt&#39;);
  });
});
</script>

登入後複製

2.ajax() 將資料載入到XMLHttpRequest物件中

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  /// <summary>
  /// param1 param2 对应前面js传递来的参数。
  /// </summary>
  /// <param name="param1"></param>
  /// <param name="param2"></param>
  /// <returns></returns>
  [System.Web.Services.WebMethod]
  public static string GetDataTable(String param1, String param2)
  {
    return DataTable2Json(CreateDataTable(param1, param2));
  }
  public static System.Data.DataTable CreateDataTable(String param1, String param2)
  {
    System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser");
    System.Data.DataRow dr;
    dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable1.Columns.Add(new System.Data.DataColumn("UserName", typeof(System.String)));
    dataTable1.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["UserId"] };
    for (int i = 0; i < 8; i++)
    {
      dr = dataTable1.NewRow();
      dr[0] = i;
      dr[1] = "【孟子E章】" + i.ToString() + " 前端传递的参数的值分别是:" + param1 + ", " + param2;
      dataTable1.Rows.Add(dr);
    }
    return dataTable1;
  }
  public static string DataTable2Json(System.Data.DataTable dt)
  {
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{\"");
    jsonBuilder.Append(dt.TableName.ToString());
    jsonBuilder.Append("\":[");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
      jsonBuilder.Append("{");
      for (int j = 0; j < dt.Columns.Count; j++)
      {
        jsonBuilder.Append("\"");
        jsonBuilder.Append(dt.Columns[j].ColumnName);
        jsonBuilder.Append("\":\"");
        jsonBuilder.Append(dt.Rows[i][j].ToString());
        jsonBuilder.Append("\",");
      }
      jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
      jsonBuilder.Append("},");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();
  }  
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子</title>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="result"></div>
  </form>
  <script type="text/javascript">
    $(document).ready(function () {
      $.ajax({
        type: "POST",
        url: "<%=Request.Url.ToString() %>/GetDataTable",  /* 注意后面的名字对应CS的方法名称 */
        data: "{\"param1\":\"8888\",\"param2\":\"参数2\"}", /* 注意参数的格式和名称 */
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
          data = jQuery.parseJSON(result.d);  /*这里是否解析要看后台返回的数据格式，如果不返回表名则无需要 parseJSON */
          t = "<table border=&#39;1&#39;>";
          $.each(data.BlogUser, function (i, item) { /* BlogUser是返回的表名 */
            t += "<tr>";
            t += "<td>" + item.UserId + "</td>";
            t += "<td>" + item.UserName + "</td>";
            t += "</tr>";
          })
          t += "</table>";
          $("#result").html(t);
        }
      });
    });      
  </script>
</body>
</html>

登入後複製

3.post() 透過post方式傳參

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>.NET下jQuery-post方法应用</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div style="margin:15px; font-size:13px;">
        加法：
        <input type="text" id="txt_1" name="txt_1" maxlength="5" style="width:50px;" /> + 
        <input type="text" id="txt_2" name="txt_2" maxlength="5" style="width:50px;" /> 
        <input type="button" id="btn_1" value="计算" /> 
        <span id="span_1" style="color:Red; font-weight:bold; font-size:14px;">结果:</span>
        
        <br />
        
        乘法：
        <input type="text" id="txt_3" name="txt_3" maxlength="5" style="width:50px;" /> × 
        <input type="text" id="txt_4" name="txt_4" maxlength="5" style="width:50px;" /> 
        <input type="button" id="btn_2" value="计算" /> 
        <div id="div_2" style="color:Red; font-weight:bold; font-size:14px;">结果:</div>
    </div>
    
    <script type="text/javascript">
        $("#btn_1").click(function(){
            //验证
            if ($("#txt_1").val()==&#39;&#39; || $("#txt_2").val()==&#39;&#39;)
            {
                alert(&#39;请输入要计算的值&#39;);
                return false;
            }
            //向add.ashx请求结果
            $.post(&#39;Enumerate/add.ashx&#39;,{ 
                //参数一
                num1: $(&#39;#txt_1&#39;).val(), 
                //参数二
                num2: $("#txt_2").val() 
            }, 
            //回调函数
            function(theback) 
            {
                //输出结果
                $("#span_1").text(theback);
            },
            //返回类型
            "text"
            );
        });
        
        $("#btn_2").click(function(){
            //验证
            if ($("#txt_3").val()==&#39;&#39; || $("#txt_4").val()==&#39;&#39;)
            {
                alert(&#39;请输入要计算的值&#39;);
                return false;
            }
            //向multiply.ashx请求结果
            $.post(&#39;Enumerate/multiply.ashx&#39;,{ 
                //参数一
                num1: $(&#39;#txt_3&#39;).val(), 
                //参数二
                num2: $("#txt_4").val() 
            },
            //回调函数 
            function(theback) 
            {
                //输出结果
                $("#div_2").html(&#39;第一个数：&#39;+theback.num1+&#39;<br />&#39;+&#39;第二个数：&#39;+theback.num2+&#39;<br />&#39;+&#39;算法类型：&#39;+theback.type+&#39;<br />&#39;+&#39;计算结果：&#39;+theback.result);
            },
            //返回类型
            "json"
            );
        });
    </script>
</body>
</html>

登入後複製

4.get() 透過get方式傳遞參數，使用同post()方法

5.getScript () 透過Get方式請求並執行一個javascript檔,url為javascript文件位址

以上是jquery ajax定義與用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！