jQuery 调用后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code:
view plaincopy to clipboardprint?
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
JQuery code:
view plaincopy to clipboardprint?
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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、带参数的方法调用
asp.net code:
view plaincopy to clipboardprint?
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
JQuery code:
view plaincopy to clipboardprint?
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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、返回数组方法的调用
asp.net code:
view plaincopy to clipboardprint?
using System.Web.Script.Services;
[WebMethod]
public static List<string> GetArray()
{
List<string> li = new List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
using System.Web.Script.Services;
[WebMethod]
public static List<string> GetArray()
{
List<string> li = new List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
JQuery code:
view plaincopy to clipboardprint?
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
运行结果:
4、返回Hashtable方法的调用
asp.net code:
view plaincopy to clipboardprint?
using System.Web.Script.Services;
using System.Collections;
[WebMethod]
public static Hashtable GetHash(string key,string value)
{
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
return hs;
}
using System.Web.Script.Services;
using System.Collections;
[WebMethod]
public static Hashtable GetHash(string key,string value)
{
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
return hs;
}
JQuery code:
view plaincopy to clipboardprint?
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetHash",
//记得加双引号 T_T
data: "{ 'key': 'haha', 'value': '哈哈!' }",
contentType: "application/json; 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");
}
});
//禁用按钮的提交
return false;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetHash",
//记得加双引号 T_T
data: "{ 'key': 'haha', 'value': '哈哈!' }",
contentType: "application/json; 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");
}
});
//禁用按钮的提交
return false;
});
});
运行结果:
5、操作xml
XMLtest.xml:
view plaincopy to clipboardprint?
<?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>
<?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 code:
view plaincopy to clipboardprint?
$(function() {
$("#btnOK").click(function() {
$.ajax({
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);
}
});
//禁用按钮的提交
return false;
});
});
$(function() {
$("#btnOK").click(function() {
$.ajax({
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);
}
});
//禁用按钮的提交
return false;
});
});
转载于:https://www.cnblogs.com/kingdom_0/articles/1911623.html
jQuery 调用后台方法相关推荐
- 使用jquery ajax调用后台方法 有时候不调用回调函数
今天在编辑修改页面时遇到了一个很尴尬的问题,浪费了好多时间,问题描述: 使用jquery ajax调用后台方法,正确时弹出提示框,并且跳转到list列表页面.然而,写好了之后有时候会不跳转,直接刷新一 ...
- 关于datagrid中控件利用js调用后台方法事件的问题
前台调用后台方法除了用button的click事件,还可以用js调用 一.前台页面如图 需求点击这个按钮触发后台事件,从而能够调用存储过程 <epoint:HyperLinkColumn He ...
- Ajax 1.0 中使用web控件调用后台方法的用法.
今天在做页面文本框审核的时候发现个Ajax 1.0 中使用web控件调用后台方法的一个不爽的地方. 把该调用方法发上来供大家参考. 首先我们创建一个MasterPage.master文件. 在页面上放 ...
- js调用后台方法与后台调用js方法
JS调用后台方法大全 javascript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为docu ...
- asp.net jquery.Ajax() 方法调用后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...
- jquery与Ajax() 调用后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...
- ASP.NET通过ajax调用后台方法
ASP.NET应用程序,通过ajax调用后台的方法 实现非常简单,直接上代码 页面代码 <%@ Page Language="C#" AutoEventWireup=&quo ...
- php前台调用后台方法,JavaScript_JavaScript调用后台的三种方法实例,方法一:直接使用%=%调 - phpStudy...
JavaScript调用后台的三种方法实例 方法一:直接使用调用 前台JS: var methodStr = ""; alert(methodStr); 后头方法: public ...
- js向jsf调用后台方法并传递参数
使用p:remoteCommand来达到复杂的异步刷新取值 大家请注意,这个方法可以真正的解决在jsf中通过js调用后台bean方法并获取bean方法返回值的问题. 同样,首先我们要写两个jsf组件, ...
- java按钮调用 后台方法_onclick怎么调用后台中的一个方法
javaScript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为document.getEle ...
最新文章
- SpiderData 2019年2月13日 DApp数据排行榜
- 72小时BCH日本生存挑战赛顺利完成
- Chrome 开发者工具 live expression 的用法
- 02Prism WPF 入门实战 - 建项
- codevs4203山区建小学
- qvalue: Check that you have valid p-values or use a different range of lambda
- 《万物互联》——2.3 理解智能设备
- 一点一点学写Makefile-1
- Linux 进程与信号的概念和操作 linux process and signals
- linux计算与检查md5值
- 2021年第四届“安洵杯”网络安全挑战赛Writeup
- unity3d + lua + 斗地主 系列 (1) 创建扑克对象
- Git Github学习笔记
- 59.qt quick-qml调色板(颜色取色器)实现、自定义QQuickStyle样式
- 搞事开始——Python基于PC版微信实现机器人
- emd matlab工具箱,Matlab-EMD工具箱
- 64 SUSE 下GCC 4.8.2 编译的 skipping incompatible 问题
- 海康视频监控接入心得
- 腾讯新闻android2.3,腾讯新闻Android客户端更新 加入投票功能
- 【Open Judge】7624 山区建小学
热门文章
- 如何解决js引入混乱_做个笔记,图片如何实现懒加载(LazyLoad按需加载)
- 如何修改默认字体_Excel技巧:怎么修改默认字体为宋体
- Vuex getters 基础使用
- Harmony OS — ProgressBar垂直、水平进度条
- 《超级搭讪学》— 综合素质提升书籍
- Kotlin — 适用于移动端跨平台
- Android SQLite封装sql语句、查看数据库
- rk3399_android7.1调试lsm9ds1三合一sensor记录
- linux文件目录类命令--pwd命令
- 利用iisnode模块,让你的Node.js应用跑在Windows系统IIS中