一 ：最近因为帮同事开发项目使用到了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：
注意事项说明二：
最终实现：
天气寒冷，就先写到这里….
