Jquery Ajax 정의 및 사용 예에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-06-19 09:23:081055검색
정의 및 사용법
ajax() 메서드는 HTTP 요청을 통해 원격 데이터를 로드합니다.
이 메서드는 jQuery의 기본 AJAX 구현입니다. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 유연성을 높이기 위해 덜 일반적으로 사용되는 옵션을 조작해야 하는 경우가 아니면 이 기능을 직접 조작할 필요가 없습니다.
가장 간단한 경우에는 $.ajax()를 매개변수 없이 직접 사용할 수 있습니다.
참고: 모든 옵션은 $.ajaxSetup() 함수를 통해 전역적으로 설정할 수 있습니다.
jQuery Ajax는 웹 애플리케이션 개발에 매우 일반적으로 사용됩니다. 여기에는 주로 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() 포스트 메소드 통과 참조 <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 메소드를 통해 자바스크립트 파일 요청 및 실행, url은 자바스크립트 파일 주소 위 내용은 Jquery Ajax 정의 및 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.