利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code：
using System.Web.Script.S
[WebMethod]
public static string SayHello()
return "Hello Ajax!";
注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
JQuery code：
$(function() {
$("#btnOK").click(function() {
//要用post方式
type: "Post",
//方法所在页面和方法名
url: "data.aspx/SayHello",
contentType: "application/ charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
error: function(err) {
alert(err);
//禁用按钮的提交
2、带参数的方法调用
asp.net code：
using System.Web.Script.S
[WebMethod]
public static string GetStr(string str, string str2)
return str + str2;
JQuery code：
/// &reference path="jquery-1.4.2-vsdoc.js"/&
$(function() {
$("#btnOK").click(function() {
type: "Post",
url: "data.aspx/GetStr",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
data: "{'str':'我是','str2':'XXX'}",
contentType: "application/ charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
error: function(err) {
alert(err);
//禁用按钮的提交
运行结果：
下面进入高级应用罗
3、返回数组方法的调用
&asp.net code：
using System.Web.Script.S
[WebMethod]
public static List&string& GetArray()
List&string& li = new List&string&();
for (int i = 0; i & 10; i++)
li.Add(i + "");
JQuery code：
/// &reference path="jquery-1.4.2-vsdoc.js"/&
$(function() {
$("#btnOK").click(function() {
type: "Post",
url: "data.aspx/GetArray",
contentType: "application/ charset=utf-8",
dataType: "json",
success: function(data) {
//插入前先清空ul
$("#list").html("");
//递归获取数据
$(data.d).each(function() {
//插入结果到li里面
$("#list").append("&li&" + this + "&/li&");
alert(data.d);
error: function(err) {
alert(err);
//禁用按钮的提交
运行结果：
4、返回Hashtable方法的调用
asp.net code：
using System.Web.Script.S
using System.C
[WebMethod]
public static Hashtable GetHash(string key,string value)
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
JQuery code：
/// &reference path="jquery-1.4.2-vsdoc.js"/&
$(function() {
$("#btnOK").click(function() {
type: "Post",
url: "data.aspx/GetHash",
//记得加双引号
data: "{ 'key': 'haha', 'value': '哈哈！' }",
contentType: "application/ charset=utf-8",
dataType: "json",
success: function(data) {
alert("key: haha ==& "+data.d["haha"]+"/n key: www ==& "+data.d["www"]);
error: function(err) {
alert(err + "err");
//禁用按钮的提交
运行结果：
&5、操作xml
XMLtest.xml:
&?xml version="1.0" encoding="utf-8" ?&
&id&1&/id&
&name&qwe&/name&
&id&2&/id&
&name&asd&/name&
JQuery code:
$(function() {
$("#btnOK").click(function() {
url: "XMLtest.xml",
dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
success: function(xml) {
//清空list
$("#list").html("");
//查找xml元素
$(xml).find("data&item").each(function() {
$("#list").append("&li&id:" + $(this).find("id").text() +"&/li&");
$("#list").append("&li&Name:"+ $(this).find("name").text() + "&/li&");
error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
alert(status);
//禁用按钮的提交
运行结果：
阅读(...) 评论()页面导航：
→ 正文内容 后台获得数据集
用jquery和json从后台获得数据集的代码
最近正在用ajax无刷新做网站，发现数据很好传输，但是数据集不知道怎么获得，于是，上网查了一些资料来传输数据，现在和大家分享一下，不知道的童鞋可以和我一起学习，知道的请指点一二。我选择的方法是用json 来获取数据集
其实Json也就是一种数据的格式，在后台将数据封转为一种格式，然后在前台用相同的方法解析，类似于序列化。json格式主要是由键值对组成，它可以表示多个数据。比如 {name:zhangsan,age:12,class:1} 同时json 还可以表示一个数据集，它是又{}和： 来组成的。比如我们需要从数据库查询出一张表格，然后将表格传输给前台，但是dataset是不能直接传输的，我们需要将dataset数据转换为json数据，这样可以方便前台js解析数据，下面我来写一下转换的格式 {Name:表的名称，Rows:[{SName:姓名,SAge:年龄}{...}{...}]}这是一张表格的数据格式, {Tables:[{Name:表1的名称，Rows:[{SName:姓名,SAge:年龄}{...}{...}]}{Name:表2的名称，Rows:[{SName:姓名,SAge:年龄}{...}{...}]}]}这是多张表的数据格式 下面用一个例子来给大家演示一下数据集得传输 首先我们需要一个前台页面来获取数据 studentinfo.html,在这个页面中我们有一个函数来获取Json格式的数据，jquery 很好的为我们封装了一个这样的函数,JSON.parse();
代码如下: &script type="text/javascript"& function getData() { $("#data").val(""); jQuery.post('../ashx_for_request/getdataset.ashx', {}, function (data) {//data为后台传输过来的数据 var obj = JSON.parse(data); //将后天传输的数据转换为Json格式 $("#data").html(""); $.each(obj.Tables, function (index, table) {//遍历数据集表格，输出数据集的内容 //根据不同的表名，显示不同的字段。得到特定表，table = obj.Tables[0] var tableName = table.N $.each(table.Rows, function (index, row) {//遍历数据集表格中的行 $("#data").html($("#data").html() + row.SID + row.SName + row.SAge + row.SClass + row.SSex + row.SGrade + "&/br&"); //每行的每一个列的内容 在这里我们用row.colname来获取每一行每一列的内容 }); }); }) } &/script&
我们用到的是jquery 的post函数来从后台获取数据，然后将数据解析，现在我来演示一下后台的数据格式
代码如下: private String GetDataSet() { System.Data.DataSet ds = new System.Data.DataSet(); //测试用数据 using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection("server=.;database=Suid=pwd=123456")) { using (System.Data.SqlClient.SqlCommand com=conn.CreateCommand()) { <mandText = "select * from BaseNews"; System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(com); da.Fill(ds); } } return Dataset2Json(ds); } ///&summary& /// dataTable转换成Json格式 ///&/summary& ///&param name="dt"&&/param& ///&returns&&/returns& public static string DataTable2Json(System.Data.DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{\"Name\":\"" + dt.TableName + "\",\"Rows"); jsonBuilder.Append("\":["); for (int i = 0; i & dt.Rows.C i++) { jsonBuilder.Append("{"); for (int j = 0; j & dt.Columns.C j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("\":\""); jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"")); //对于特殊字符，还应该进行特别的处理。 jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } ///&summary& /// DataSet转换成Json格式 ///&/summary& ///&param name="ds"&DataSet&/param& ///&returns&&/returns& public static string Dataset2Json(System.Data.DataSet ds) { StringBuilder json = new StringBuilder(); json.Append("{\"Tables\":"); json.Append("["); foreach (System.Data.DataTable dt in ds.Tables) { json.Append(DataTable2Json(dt)); json.Append(","); } json.Remove(json.Length - 1, 1); json.Append("]"); json.Append("}"); return json.ToString(); }
给大家看一下结果
大家可以根据得到的数据给出相应的格式
大家不要以为到这里就完成了哦，Json格式在不同的浏览器下会有兼容性问题，这时大家只需下载一个json2的js即可。
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现，整个过程当中学习到很多知识点，了解了Jquery、Ajax在.net中的运用，加以总结，其实原理都是一样的，理解了一种，其他的注意很少的区别就可以了、灵活运用：
1、有参数的方法调用
示例代码如下：
前台jQuery代码：
$(function() {&
&知道的一种就是ajax调后台的方法。&
1、有参数的方法调用 &
示例代码如下：
前台jQuery代码：
&span style=&font-size:18px&&$(function() { &
& var browers = browersEstimate(); &
& var params = &#39;{browersType:&&#39; + browers + &#39;&}&#39;; &
& $.ajax({ &
& & & type: &POST&, & & & & & & & & & //提交方式 &
& & & url: &Default.aspx/RecordData&, & //提交的页面/方法名 &
& & & data: params, & & & & & & & & & //参数（如果没有参数：null） &
& & & dataType: &json&, & & & & & & & & & //类型 &
& & & contentType: &application/ charset=utf-8&, & & &&
& & & success: function(data) { & & &&
& & & & & & & //返回的数据用data.d获取内容 & & &&
& & & & & & & & alert(data.d); & & &&
& & & & & }, & & &&
& & & & & error: function(err) { & & &&
& & & & & & & alert(err); & & &&
& & & & &}); & &&
& & &});&/span& &
这个是jquery下Ajax方法调用后台方法。
这个方法有几点需要说明：
type方式必须是post，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同。
asp.net后台方法：
&span style=&font-size:18px&& &[System.Web.Services.WebMethod()] &
& & public static void RecordData(string browersType) &
& & & & if (BrowserControl.Counters == null) &
& & & & { &
& & & & & & BrowserControl.InitData(0); &
& & & & } &
& & & & if (browersType == &&) &
& & & & { &
& & & & & & browersType = &Other&; &
& & & & } &
& & & & BrowserControl.AddOneByBrowserType(browersType); &
& & & & if (BrowserControl.WriteInDataBase()) &
& & & & { &
& & & & & & BrowserControl.OldTotalCount = BrowserControl.Counters.C &
& & & & } &
& & & & else &
& & & & { &
& & & & & & BrowserControl.OldTotalCount = 0; &
& & & & } &
& & }&/span& &
2、无参数的方法调用
示例代码：
前台jQuery代码
&span style=&font-size:18px&&$(function() { & & &&
& & $(&#btnOK&).click(function() { & & &&
& & & & $.ajax({ & & &&
& & & & & & //要用post方式 & & &&
& & & & & & type: &Post&, & & &&
& & & & & & //方法所在页面和方法名 & & &&
& & & & & & url: &data.aspx/SayHello&, & & &&
& & & & & & contentType: &application/ charset=utf-8&, & & &&
& & & & & & dataType: &json&, & & &&
& & & & & & success: function(data) { & & &&
& & & & & & & & //返回的数据用data.d获取内容 & & &&
& & & & & & & & alert(data.d); & & &&
& & & & & & }, & & &&
& & & & & & error: function(err) { & & &&
& & & & & & & & alert(err); & & &&
& & & & & & } & & &&
& & & & }); & & &&
& & & & //禁用按钮的提交 & & &&
& & & & & & &&
& & }); & & &&
});&/span& &
asp.net后台方法
&span style=&font-size:18px&&[System.Web.Services.WebMethod()] &
public static string SayHello() & & &&
return &Hello Ajax!&; & & &&
}&/span& &
3、返回数组方法的调用
示例前台JQuery代码：
&span style=&font-size:18px&&$(function() { & & &&
& & $(&#btnOK&).click(function() { & & &&
& & & & $.ajax({ & & &&
& & & & & & type: &Post&, & & &&
& & & & & & url: &data.aspx/GetArray&, & & &&
& & & & & & contentType: &application/ charset=utf-8&, & & &&
& & & & & & dataType: &json&, & & &&
& & & & & & success: function(data) { & & &&
& & & & & & & & //插入前先清空ul & & &&
& & & & & & & & $(&#list&).(&&); & & &&
& & & & & & & & //递归获取数据 & & &&
& & & & & & & & $(data.d).each(function() { & & &&
& & & & & & & & & & //插入结果到li里面 & & &&
& & & & & & & & & & $(&#list&).append(&& + this + &&); & & &&
& & & & & & & & }); & & &&
& & & & & & & & alert(data.d); & & &&
& & & & & & }, & & &&
& & & & & & error: function(err) { & & &&
& & & & & & & & alert(err); & & &&
& & & & & & } & & &&
& & & & }); & & &&
& & & & //禁用按钮的提交 & & &&
& & & & & & &&
& & }); & & &&
});&/span& &
asp.net 后台代码：asp.net 后台代码：
&span style=&font-size:18px&&[System.Web.Services.WebMethod()] & &&
public static List GetArray() & & &&
& List li = new List(); & & &&
for (int i = 0; i & 10; i++) & & &&
& & & & li.Add(i + &&); & & &&
} &/span& &
4、操作xml
&span style=&font-size:18px&&xnl文件示例： & &&
&&?xml version=&1.0& encoding=&utf-8& ?& & & &
&data& & & &
& &item& & & &
& & &id&1&/id& & & &
& & &name&qwe&/name& & & &
& &/item& & & &
& &item& & & &
& & &id&2&/id& & & &
& & &name&asd&/name& & & &
& &/item& & & &
&/data& & & &&
Jquery代码：Jquery代码：&/span& &
Jquery前台代码：
&span style=&font-size:18px&&$(function() { & & &&
& & $(&#btnOK&).click(function() { & & &&
& & & & $.ajax({ & & &&
& & & & & & url: &XMLtest.xml&, & & &&
& & & & & & dataType: &#39;xml&#39;, //返回的类型为XML ，和前面的Json，不一样了 & & &&
& & & & & & success: function(xml) { & & &&
& & & & & & & & //清空list & & &&
& & & & & & & & $(&#list&).html(&&); & & &&
& & & & & & & & //查找xml元素 & & &&
& & & & & & & & $(xml).find(&data&item&).each(function() { & & &
& & & & & & & & & & $(&#list&).append(&id:& + $(this).find(&id&).text() +&&); & & &
& & & & & & & & & & $(&#list&).append(&Name:&+ $(this).find(&name&).text() + &&); & & &&
& & & & & & & & }) & & &&
& & & & & & }, & & &&
& & & & & & error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 & & &&
& & & & & & & & alert(status); & & &&
& & & & & & } & & &&
& & & & }); & & &&
& & & & //禁用按钮的提交 & & &&
& & & & & & &&
& & }); & & &&
});&/span& &
主要是我们要注意js代码里面的方法名要与后台一致，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同，注意这几部分我们的调试就简单多了，剩下的就是多多实践、加强原理的理解了。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。jquery ajax 调用后台方法传值问题_百度知道
jquery ajax 调用后台方法传值问题
后台方法：[WebMethod]public sta鸡订惯寡甙干轨吮憨经tic string InsertModel(List&T& t){return string.E}$.ajax的 data参数要怎么传值啊。
提问者采纳
传入一个包含参数的对象（Object）。参数如下：asyncBoolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)Function发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。 function (XMLHttpRequest) { // 调用本次AJAX请求时传递的options参数}cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。complete(XHR, TS)Function请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。 function (XMLHttpRequest, textStatus) { // 调用本次AJAX请求时传递的options参数}contentTypeString(默认: &application/x-www-form-urlencoded&) 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）contextObject这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样： $.ajax({ url: &test.html&, context: document.body, success: function(){
$(this).addClass(&done&);}});dataObject,String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[&bar1&, &bar2&]} 转换为 &#39;&foo=bar1&foo=bar2&#39;。dataFilterFunction给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data
// 返回处理后的数据}dataTypeString预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值: &xml&: 返回 XML 文档，可用 jQuery 处理。&html&: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。&script&: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了&cache&参数。&#39;&#39;&#39;注意：&#39;&#39;&#39;在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)&json&: 返回 JSON 数据 。&jsonp&: JSONP 格式。使用 JSONP 形式调用函数时，如 &myurl?callback=?& jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。&text&: 返回纯文本字符串errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是&timeout&, &error&, &notmodified& 和 &parsererror&。Ajax 事件。 function (XMLHttpRequest, textStatus, erro鸡订惯寡甙干轨吮憨经rThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息 // 调用本次AJAX请求时传递的options参数}globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中，他也会检查服务器指定的&#39;etag&#39;来确定数据没有被修改过。jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在&callback=?&这种GET或POST请求中URL参数里的&callback&部分，比如{jsonp:&#39;onJsonPLoad&#39;}会导致将&onJsonPLoad=?&传给服务器。jsonpCallbackString为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。passwordString用于响应HTTP访问认证请求的密码processDataBoolean(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 &application/x-www-form-urlencoded&。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。scriptCharsetString只有当请求时dataType为&jsonp&或&script&，并且type是&GET&才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。successFunction请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax 事件。 function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等... // 调用本次AJAX请求时传递的options参数}traditionalBoolean如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param 方法。timeoutNumber设置请求超时时间（毫秒）。此设置将覆盖全局设置。typeString(默认: &GET&) 请求方式 (&POST& 或 &GET&)， 默认为 &GET&。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。urlString(默认: 当前页地址) 发送请求的地址。usernameString用于响应HTTP访问认证请求的用户名xhrFunction需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用
我的代码：cs:
[WebMethod]public static string GetAll(List&T& list){
return && ;
var d = [];$.ajax({data: 这里怎么写,
datatype:这里怎么写});
望高手指教。。 谢啦
data为名值对的形式发送。就是&key1=value1&key2=value2&，没有特殊要求的话，datatype可以不写。如果datatype不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。建议你使用$.get和$.post来代替$.ajax，前两者使用起来比较简单。jQuery.get(url, [data], [callback], [type])参数urlString待载入页面的URL地址data (可选)Map待发送 Key&#47;value 参数。callback (可选)Function载入成功时回调函数。type (可选)String返回内容格式，xml, html, script, json, text, _default。
提问者评价
谢谢啦。可惜没分了。。
参考资料：
jquery参考手册
其他类似问题
jquery的相关知识
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁