定义和用法
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中文网其他相关文章!