ajax,html,aspx,Net WebForm jQuery Ajax 传值到aspx后台
1.在Net WebForm中,编写aspx文件,有时候想在后台编写类似WebAPI形式的方法。前台使用jQuery Ajax方式调用。【PS:jQuery ajax Get方式将直接走后台Page_Load方法,到不了标记的处理方法。】运行效果:
界面:
返回值:
2.前台代码
Inherits="WebApplication1.JQueryWebMethod" %>
jQuery ajax GET POST 到后台方法
function onGetAjax() {
/********************************/
window.alert('jquery ajax get方式无法直接调用aspx.cs后台方法!!!谨记!!!');
return;
/********************************/
$.ajax({
type: 'get',
url: 'JQueryWebMethod.aspx/GetAjax?a=121&b=122',
contentType: 'application/x-www-form-urlencoded;charset=utf-8', //请求头格式,key/value
dataType: 'json', //返回值格式,json
success: function (data) {
var jsonObj = JSON.parse(data.d);
console.log('get:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);
},
error: function (data) {
console.log(data);
}
});
};
/***************带参******************/
function onPostAjax(obj) {
$.ajax({
type: 'post',
url: 'JQueryWebMethod.aspx/PostAjax',
contentType: 'application/json;charset=utf-8', //请求头格式,json
dataType: 'json', //返回值格式,json
data: "{'a':'0','b':'1'}",
beforeSend: function () {
//禁用按钮,加遮罩层等
$(obj).attr('disabled', 'disabled');
},
success: function (data) {
var jsonObj = JSON.parse(data.d);
console.log('post:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);
},
error: function (data) {
var errMsg = data.responseJSON.Message;
console.log(errMsg);
},
complete: function () {
//启用按钮,取消遮罩层等
$(obj).removeAttr('disabled');
}
});
};
/***************无参******************/
function onPostAjax1(obj) {
$.ajax({
type: 'post',
url: 'JQueryWebMethod.aspx/PostAjax1',
contentType: 'application/json;charset=utf-8', //请求头格式,json
dataType: 'json', //返回值格式,json
beforeSend: function () {
//禁用按钮,加遮罩层等
$(obj).attr('disabled', 'disabled');
},
success: function (data) {
var jsonObj = JSON.parse(data.d);
console.log('post:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);
},
error: function (data) {
var errMsg = data.responseJSON.Message;
console.log(errMsg);
},
complete: function () {
//启用按钮,取消遮罩层等
$(obj).removeAttr('disabled');
}
});
};
/***************带参返回List******************/
function onPostAjax2(obj) {
$.ajax({
type: 'post',
url: 'JQueryWebMethod.aspx/PostAjax2',
contentType: 'application/json;charset=utf-8', //请求头格式,json
dataType: 'json', //返回值格式,json
data: "{'a':'值1','b':'值2'}",
beforeSend: function () {
//禁用按钮,加遮罩层等
$(obj).attr('disabled', 'disabled');
},
success: function (data) {
var jsonObj = data.d;
$.each(jsonObj, function (index, value) {
console.log('post:index=' + index + ',value=' + value);
});
},
error: function (data) {
var errMsg = data.responseJSON.Message;
console.log(errMsg);
},
complete: function () {
//启用按钮,取消遮罩层等
$(obj).removeAttr('disabled');
}
});
};
3.后台代码
先引用System.Web.Services;
然后代码。
public partial class JQueryWebMethod : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
///
/// 不可直接被前端Get调用
///
///
///
///
[WebMethod]
public static string GetAjax(string a,string b)
{
return "{\"a\":\""+a+"\",\"b\":\""+b+"\"}";
}
///
/// AJAX POST可用 【带参,返回json字符串】
///
///
///
///
[WebMethod]
public static string PostAjax(string a, string b)
{
return "{\"a\":\"" + a + "\",\"b\":\"" + b + "\"}";
}
///
/// AJAX POST可用 【无参】
///
///
[WebMethod]
public static string PostAjax1()
{
return "{\"a\":\"返回值1\",\"b\":\"返回值2\"}";
}
///
/// AJAX POST可用 【带参,返回List】
///
///
///
///
[WebMethod]
public static List PostAjax2(string a, string b)
{
return new List(){a,b,"值3","值4"};
}
}
ajax,html,aspx,Net WebForm jQuery Ajax 传值到aspx后台相关推荐
- jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号 用户帐户 发货状态 请选择 未发送 已发送 查询 JavaScript请求部分: function showdatalist() { var username = ...
- Ajax设置超时时长,jquery ajax超时设置
var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式 ...
- flask ajax 上传 图片,flask jQuery ajax 上传文件
1.html 代码 注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
- ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
- ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
- asp.net ajax 源码,asp.net+jquery+ajax简单留言板 v1.2
asp.netC#+jquery1.4.1 +ajax留言板程序说明 采用asp.net C#+ jquery1.4.1 +ajax的实现 主要用aspx文件请求 还可以用ashx处理 ajax返回类 ...
- ajax中url如何使用,jQuery Ajax url使用方式
jQuery Ajax的使用场景: 页面需要通过后台逻辑,但只需要局部刷新以显示新的内容. jQuery Ajax url使用方式 1.servlet方式: 需要在struts.xml中写一个acti ...
- ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
- .ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 在js脚本文件中首先把这个图片动画隐藏 代码如下 $(document).ready(function () { $(" ...
最新文章
- 嵌入式软件工程师笔试题(含答案)
- kafka之Producer同步与异步消息发送及事务幂等性案例应用实战
- Android 系统工具类SystemUtils
- 【干货】CRM大牛告诉你,Salesforce到底是个什么鬼?
- SQL Server 2008 阻止保存要求重新创建表的更改
- 一串事物中每个事物的前后位置与顺序编号的转换问题
- iOS酷我音乐导出工具使用说明和原理介绍(提供下载链接及工程源码)
- 2022春招马蜂窝旅游网第一轮面试 面经
- 如何在jQuery中发送PUT / DELETE请求?
- springboot+junit测试
- Git 多平台换行符问题(LF or CRLF)
- 微信小程序中的换行、空格
- 安卓手机怎么下载ins
- c语言函数max 的作用,C语言问题—max()函数
- Spring Boot之自定义JSON转换器
- “国六”新要求——基于OBD系统的量产车评估测试 (PVE)
- 【基于动态内存+文件操作】通讯录管理系统
- 842计算机基础考试大纲,(842)考试大纲-计算机专业基础.docx
- 国密SM4加解密SM2签名验签COM组件DLL
- 服务器电源系统,服务器电源系统于新一代数据中心设计的基础意义