首页 > 代码库 > Ajax——ajax调用数据总结
Ajax——ajax调用数据总结
在做人事系统添加批量修改的功能中,需要将前台中的数据传给后台,后台并执行一系列的操作。通过查询和学习了解到可以通过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=http://www.mamicode.com/"单击返回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=http://www.mamicode.com/"确定" />
后台代码:
//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=http://www.mamicode.com/"单击返回数组" />
后台代码:
//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=http://www.mamicode.com/"单击返回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)
Ajax——ajax调用数据总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。