jquery ajax定義與用法實例詳解
- 伊谢尔伦原創
- 2017-06-19 09:23:081059瀏覽
定義和用法
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(){
$('#myDiv').load('/jquery/test.txt');
});
});
</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='1'>";
$.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()=='' || $("#txt_2").val()=='')
{
alert('请输入要计算的值');
return false;
}
//向add.ashx请求结果
$.post('Enumerate/add.ashx',{
//参数一
num1: $('#txt_1').val(),
//参数二
num2: $("#txt_2").val()
},
//回调函数
function(theback)
{
//输出结果
$("#span_1").text(theback);
},
//返回类型
"text"
);
});
$("#btn_2").click(function(){
//验证
if ($("#txt_3").val()=='' || $("#txt_4").val()=='')
{
alert('请输入要计算的值');
return false;
}
//向multiply.ashx请求结果
$.post('Enumerate/multiply.ashx',{
//参数一
num1: $('#txt_3').val(),
//参数二
num2: $("#txt_4").val()
},
//回调函数
function(theback)
{
//输出结果
$("#div_2").html('第一个数：'+theback.num1+'<br />'+'第二个数：'+theback.num2+'<br />'+'算法类型：'+theback.type+'<br />'+'计算结果：'+theback.result);
},
//返回类型
"json"
);
});
</script>
</body>
</html>4.get() 透過get方式傳遞參數，使用同post()方法
5.getScript () 透過Get方式請求並執行一個javascript檔,url為javascript文件位址
以上是jquery ajax定義與用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn