在做人事系统添加批量修改的功能中，需要将前台中的数据传给后台，后台并执行一系列的操作。通过查询和学习了解到可以通过ajax将值传入到后台，并在后台对数据进行操作。
说的简单点，就是ajax调用后台的方法。通过学习和实践，学习了几种ajax调用数据的几种形式，现在总结一下：
1． Ajax调用无参的后台方法的数据
Jquery前台代码：
//ajax调用无参数后台方法
$(function () {
$("#btnok").click(function () {
$.ajax({
type:"post", //ajax的方式为post(get方式对传送数据长度有限制)
url: "demo.aspx/Hello", //demo.aspx为目标文件，Hello为目标文件中的方法
contentType: "application/json", //传值方式
success: function (data) { //成功回传值后触发的方法
alert(data.d); //后台返回的参数
}
})
})
});
前台表单控件：
<input id="btnok" type="button" value="单击返回hello" />
后台代码：
//ajax调用的无参数方法
[WebMethod]
public static string Hello()
{
return "Hello Ajax!";
}
运行结果：
2． Ajax调用有参后台方法中的数据
Jquery前台代码：
//ajax调用有参数后台方法
$(function () {
$("#btnName").click(function () {
var strname = $("#txtName").val(); //strname获得文本框中输入的值
$.ajax({
type: "post", //ajax的方式为post(get方式对传送数据长度有限制)
contentType: "application/json", //传值方式
url: "demo.aspx/getName", //demo.aspx为目标文件，getName为目标文件中的方法
data: "{strName:'" + strname + "'}", //strName为后台方法的参数，strname为文本框中输入的值
contentType: "application/json", //传值方式
success: function (result) { //成功回传值后触发的方法
alert(result.d); //后台返回的参数
}
})
})
});
前台表单控件：
<input id="txtName" type="text" /><input id="btnName" type="button" value="确定" />
后台代码：
//ajax调用的带参数的方法
[WebMethod]
public static string getName(string strName)
{
return "欢迎"+strName;
}
运行结果：
3． Ajax调用后台方法返回数组的数据
Jquery前台代码：
//ajax调用后台方法返回数组
$(function () {
$("#btnReArr").click(function () {
$.ajax({
type: "post", //ajax的方式为post(get方式对传送数据长度有限制)
contentType: "application/json", //传值方式
url: "demo.aspx/GetArray", //demo.aspx为目标文件，GetArray为目标文件中的方法
contentType: "application/json", //传值方式
success: function (result) { //成功回传值后触发的方法
alert(result.d); //后台返回的参数
}
})
})
});
前台表单控件：
<input id="btnReArr" type="button" value="单击返回数组" />
后台代码：
//ajax调用返回数组的方法
[WebMethod]
public static List<string> GetArray()
{
List<string> li = new List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
运行结果：
4． Ajax调用xml中的数据
Jquery前台代码：
//ajax调用xml中的数据
$(function () {
$("#btnMaXML").click(function () {
$.ajax({
dataType: 'xml', //ajax的方式为post(get方式对传送数据长度有限制)
url: "demoXML.xml", //直接写xml的名字
success: function (xml) { //成功回传值后触发的方法
//查找xml元素
$(xml).find("data>item").each(function () {
var $dm = $(this);
var $id = $dm.find("id"); //获取出id字段的值
var $class = $dm.find("class");//获取出class字段的值
alert($id.text()+","+$class.text());
})
}
})
})
});
前台表单控件：
<input id="btnMaXML" type="button" value="单击返回xml中数据" />
xml代码：
<?xml version="1.0" encoding="utf-8" ?>
<data>
<item>
<id>1</id>
<class>语文</class>
</item>
<item>
<id>2</id>
<class>数学</class>
</item>
</data>
运行结果：
对于利用ajax调用后台的方法，也有一定的局限性，因为他的后台方法是静态的，所以在方法中利用表单中的控件就有一定的困难。但是这种从前台传值到后台的方法比较简单也更易于理解。
（免费送上
自己写的源码地址：
http://download.csdn.net/detail/suneqing/7265593
）