asp.net如何在前台利用jquery Ajax调用后台方法
一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此整理后记录如下
先贴上前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="aspnetAjax.Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<%=Title %></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
td
{
text-align: center;
}
</style>
<script type="text/javascript">
$(function () {
$("#but").attr("disabled", false);
});
//(全/反)选:
function getChk() {
if ($("#ch").attr("checked")) {
$(".chk").attr("checked", true);
} else {
$(".chk").attr("checked",false);
}
}
//利用AJAX将数据发送到后台并判断数据选中情况方法:
function sendData() {
var sendValue = "";
$(".chk").each(function (i,chk) {
if (chk.checked) {
sendValue += $.trim($(chk).parent().parent().find(".getData").text());
sendValue += ",";
}
})
if (sendValue.length == 0) {
alert("请选择需要传输的数据!!");
return;
}
sendValue = sendValue.substr(0, sendValue.length - 1);
//开始ajax to asp.net:
$.ajax({
type: "post",
contentType: "application/json",
url: "Index.aspx/GetAjaxValue",
data: "{sendValue:'" + sendValue + "'}",
beforeSend: function () {
$("#but").attr("disabled", true);
},
success: function (data) {
alert(data.d);
}, complete: function () { }, error: function () { }
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="400px"; border="1px solid blue" cellpadding="0px" cellspacing="0px" style="border-color: Green; text-align:center">
<tr>
<th>
全选<input type="checkbox" id="ch" onclick="getChk()" />
</th>
<th>
数据
</th>
</tr>
<tr>
<td>
<input type="checkbox" class="chk" />
</td>
<td class="getData">
1234
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chk" />
</td>
<td class="getData">
5678
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chk" />
</td>
<td class="getData">
12345678
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chk" />
</td>
<td class="getData">
87654321
</td>
</tr>
</table>
</div>
</form>
<hr />
<input type="button" id="but" onclick="sendData()" value="将选中的数据利用Ajax发送到后台" style=" background-color:#0080BB; cursor:pointer; border:1px solid #008094; border-radius:5px;" />
</body>
</html>
后台处理代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Web.Services; namespace aspnetAjax
{
public partial class Index : System.Web.UI.Page
{
public string title = "asp.net中使用Ajax";
protected void Page_Load(object sender, EventArgs e)
{ }
[WebMethod]
public static string GetAjaxValue(string sendValue)
{
return sendValue;
}
}
}
注意事项说明1:
注意事项说明二:
最终实现:
天气寒冷,就先写到这里....
asp.net如何在前台利用jquery Ajax调用后台方法的更多相关文章
- jquery + ajax调用后台方法
前台js: var parameter = ""; $.ajax({ type: "POST", //提交方式 url: "Default.aspx/ ...
- Jquery ajax调用后台aspx后台文件方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- java 中使用ajax调用后台方法注意事项
java 中使用ajax调用后台方法注意事项,后台方法一定要加@ResponseBody jQuery.validator.addMethod("checkRuleName",fu ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- webform中 ajax调用后台方法(非webservice)
方法一:通过创建一个没有内容的窗体 后台: public partial class Ajax_ShoppingCart : System.Web.UI.Page { bookdbDataContex ...
- asp.net core 的 razor pages 如何使用ajax调用后台方法
Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法. 当网页被写入浏览器时,基于服务器的代码能够创建动态内容. 在网页加载时,服务器在向浏览器返回页面 ...
- JS常用方法总结,及jquery异步调用后台方法实例
//前台接收get参数值 function getQueryString(name) { var queryStrings = window.location.search.sp ...
- C#实现简易ajax调用后台方法
在当前WEB当中,有些人都会抛弃asp.net的服务器控件,转而使用ajax来进行数据的交互和存储. 当我们大量使用ajax的时候,对于新手而言,肯定会创建很多的ashx或aspx页面,通过拼接参数, ...
随机推荐
- js/jQuery判断浏览器名称、内核版本、浏览器壳
1.js方法 /* 判断浏览器名称和版本 目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV ...
- ACM: 限时训练题解-Epic Professor-水题
Epic Professor Dr. Bahosain works as a professor of Computer Science at HU (Hadramout Universit ...
- 【CodeVS】p1079 回家
题目描述 Description 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一 ...
- 主席树+启发式合并(LT) BZOJ3123
好久没做题了,写道SBT又RE又T 查询:主席树裸题. 修改:对于两个树合并重建小的树. 注意fa[x][i]重新计算时要清空 #include<cstdio> #include<c ...
- App所需申请资料
准备资料 企业五证 营业执照 税务登记证 组织机构代码证 银行开户许可证 法人身份证 新邮箱 申请一个新的邮箱地址,供申请以下材料使用 苹果证书申请 AppleID 申请邓氏编码需要有AppleID ...
- 腾讯云Linux系统中启动自己安装的tomcat
腾讯云Linux系统中启动自己安装的tomcat 首先通过工具查看一下安装的tomcat的位置 进入命令行之后输入以下指令: 此时,tomcat已经启动了.
- flex 遍历Object或者JSON对象内容的实现代码
private function init():void { //新建对象 var obj:Object = new Object(); //增加key-value obj["name&qu ...
- 关于C#引用Dll后,找不到命名空间的问题
在引用里明确添加了一个Dll,能够看到该Dll详细信息,可就是用using找不到命名空间.并且发现刚引用时是有该命名空间,一编译就消失了. 最后发现原因如下: 原目标框架为.Net Framework ...
- 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- java.lang.UnsupportedClassVersionError: TwoSum : Unsupported major.minor version 52.0
编译的版本比运行的版本高. 两台电脑,一个装的是jdk1.7,另一个是1.8,在1.8上运行之后,上传到github然后1.7的拉下来,再运行出现了上述错误. 解决方式:设置如下