Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der JQuery-Ajax-Definition und Anwendungsbeispiele
Detaillierte Erläuterung der JQuery-Ajax-Definition und Anwendungsbeispiele
- 伊谢尔伦Original
- 2017-06-19 09:23:081010Durchsuche
Definition und Verwendung
Die Methode ajax() lädt Remote-Daten über HTTP-Anfragen.
Diese Methode ist die zugrunde liegende AJAX-Implementierung von jQuery. Einfache und benutzerfreundliche High-Level-Implementierungen finden Sie unter $.get, $.post usw. $.ajax() gibt das von ihm erstellte XMLHttpRequest-Objekt zurück. In den meisten Fällen müssen Sie diese Funktion nicht direkt manipulieren, es sei denn, Sie müssen weniger häufig verwendete Optionen für mehr Flexibilität manipulieren.
Im einfachsten Fall kann $.ajax() direkt ohne Parameter verwendet werden.
Hinweis: Alle Optionen können global über die Funktion $.ajaxSetup() festgelegt werden.
jQuery Ajax wird sehr häufig in der Webanwendungsentwicklung verwendet. Es umfasst hauptsächlich gängige aktualisierungsfreie Betriebsmethoden wie Ajax, Get, Post, Load, Getscript usw. Lassen Sie mich es Ihnen vorstellen.
Beginnen wir mit der einfachsten Methode. Bei der Verarbeitung komplexer Ajax-Anfragen verwendet jQuery die Methode jQuery.ajax(). Es gibt einige einfache Methoden in jQuery, die die Methode jQuery.ajax() kapseln, sodass wir die Methode jQuery.ajax() nicht verwenden müssen, wenn wir einige einfache Ajax--Ereignisse verarbeiten, von denen einige die Die Methode wurde bereits in früheren Artikeln vorgestellt. Ich glaube, dass jeder sie bald beherrschen wird.
Methoden zum Ausführen allgemeiner Ajax-Anfragen
1.load() Remote-Daten in das ausgewählte Element laden
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test.txt');
});
});
</script>2.ajax() Daten in XMLHttpRequest laden Im Objekt
<%@ 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() Parameter über die Post-Methode übergeben
<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() Parameter über die Get-Methode übergeben, dieselbe post()-Methode verwenden
5.getScript() Fordern Sie eine Javascript-Datei über die Get-Methode an und führen Sie sie aus. Die URL ist die Adresse der Javascript-Datei.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JQuery-Ajax-Definition und Anwendungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!