JQuery直接调用asp.net后台WebMethod方法
2016-02-15 00:16
716 查看
http://www.cnblogs.com/PearlRan/p/4833044.html
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
后台
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
前台:
$(function() {
$("#btnOK").click(function() {
$.ajax({
//要用post方式
type: "Post",
//方法所在页面和方法名
url: "data.aspx/SayHello",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
}
});
});
2、带参数的方法调用
后台
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
前台:
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetStr",
//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字
data: "{'str':'我是','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
}
});
});
3、返回数组方法的调用
后台
using System.Web.Script.Services;
[WebMethod]
public static List GetArray()
{
List li = new List();
}
前台:
///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetArray",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//插入前先清空ul
$("#list").html("");
});
function inputchenk() { var value = document.getElementById("txtUserName").value; if (value == "") { alert("用户名不能为空!"); return false; } value = document.getElementById("txtPassWord").value; if (value == "") { alert("密码不能为空!"); return false; } value = document.getElementById("txtCheckCode").value; if (value == "") { alert("验证码不能为空!"); return false; } else { var isNext = false; $.ajax({ type: "Post", url: "Login.aspx/GetCode", contentType: "application/json;charset=utf-8", dataType: "json", async: false, success: function (res) { if (res.d == value) { isNext = true; } else { alert("验证码不正确!"); //isNext = true; } }, error: function (xmlReq, err, c) { alert(err); } }); return isNext; } } $.ajax({ type: "Post", url: "Login.aspx/GetCode1", data: "{'msg':'hello'}", contentType: "application/json;charset=utf-8", dataType: "json", success: function (res) { alert(res.d); //$("#dataShow").text("success:" + res.d); // 注意有个d,至于为什么通过chrome看响应吧,O(∩_∩)O。 }, error: function (xmlReq, err, c) { //$("#dataShow").text("error:" + err); } });
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
后台
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
前台:
$(function() {
$("#btnOK").click(function() {
$.ajax({
//要用post方式
type: "Post",
//方法所在页面和方法名
url: "data.aspx/SayHello",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//禁用按钮的提交 return false; });
});
2、带参数的方法调用
后台
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
前台:
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetStr",
//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字
data: "{'str':'我是','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//禁用按钮的提交 return false; });
});
3、返回数组方法的调用
后台
using System.Web.Script.Services;
[WebMethod]
public static List GetArray()
{
List li = new List();
for (int i = 0; i < 10; i++) li.Add(i + ""); return li;
}
前台:
///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetArray",
contentType: "application/json; 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); } }); //禁用按钮的提交 return false; });
});
相关文章推荐
- (译)你应该知道的jQuery小技巧
- Jquery 随便写些知识点
- 三分钟玩转jQuery.noConflict()
- domino uploadify不刷新页面上传多附件
- jquery选择器
- jquery.cookie中的操作之与换肤
- jquery ajaxStart, ajaxStop 显示loading
- JQuery Tree插件
- jquery ajax No 'Access-Control-Allow-Origin' header is present on the requested resource
- 评论回复jQuery实现前端效果
- JavaScript和JQuery之战再续
- jQuery学习-表单验证功能
- jquery 自定义类
- jquery 关于 4 种提交的部分归纳
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- jquery小demo——返回顶部
- 使用jQuery调用ajax方法(七个参数法)
- jQuery版本升级踩坑大全
- 爬过的坑之Jquery篇
- js&jquery相关