定义和用法
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定义与用法实例详解的详细内容。