jqueryajax定义与用法实例详解

来源：动视网责编：小采时间：2020-11-27 20:19:36

jqueryajax定义与用法实例详解

jqueryajax定义与用法实例详解:定义和用法ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵

推荐度：

点击下载本文 文档为doc格式

导读jqueryajax定义与用法实例详解:定义和用法ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵

定义和用法

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文件地址

jqueryajax定义与用法实例详解

推荐度：

点击下载本文 文档为doc格式

标签： aj 讲解例子

热门焦点

jqueryajax定义与用法实例详解

jqueryajax定义与用法实例详解

jqueryajax定义与用法实例详解

最新推荐

猜你喜欢

热门推荐