ホームページ > 記事 > ウェブフロントエンド > jquery ajaxの定義と使用例を詳しく解説
jquery ajaxの定義と使用例を詳しく解説
- 伊谢尔伦オリジナル
- 2017-06-19 09:23:081008ブラウズ
定義と使用法
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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。