ASP.NET JQuery Ajax 详解
在.NET中使用Ajax请求，我们可以使用一般处理程序，或者Web服务，还有一种是使用后台的Web方法（注意：当我们使用后台的Web方法是，后台方法必须加可访问性必须为： public，且为static,并且要在方法要加上 [WebMethod],需要引用using System.Web.Services;命名空间,还有一个地方需要注意的是方法中的参数名一定要与Ajax请求时的参数名保持一致，其中请求Web服务需要注意的地方这这里的一样。)
我这里只讲Web服务的使用
首先是前台的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!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>
<link href="Base.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
.content
{
font-size: large;
font-style: italic;
font-weight: bold;
border: solid 1px #888;
margin-top: 4px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAjaxJsonPost").click(function (e) {
e.preventDefault();
// 首先判断用户名是否为空，并给出提示
if ($("#txtInputBoolValue").val() == "") {
alert("请输入内容！");
}
else {
sendJsonData1($("#txtInputBoolValue").val());
}
});
$("#btnAjaxStringPost").click(function (e) {
e.preventDefault();
// 首先判断用户名是否为空，并给出提示
if ($("#txtInputStringValue").val() == "") {
alert("请输入内容！");
}
else {
sendJsonData2($("#txtInputStringValue").val());
}
});
$("#btnAjaxTablePost").click(function (e) {
e.preventDefault();
// 首先判断用户名是否为空，并给出提示
if ($("#txtInputTableValue").val() == "") {
alert("请输入内容！");
}
else {
sendJsonData3($("#txtInputTableValue").val());
}
});
});
// 定义一个AJAX请求方法
function sendJsonData1(para) {
// 访问Web服务
var loc = "service/WSAjaxPost.asmx";
$.ajax({
type: "POST",
url: loc + "/ReuturnJson",
// sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
// json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
data: '{ "para": "' + para + '"}',
// 发送信息至服务器时内容编码类型
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert(msg.d);
$("#content1").text(msg.d);
},
error: function (xhr, textStatus, errorThrown) {
alert("AJAX错误：" + errorThrown);
}
});
}
function sendJsonData2(para) {
// 访问Web服务
var loc = "service/WSAjaxPost.asmx";
$.ajax({
type: "POST",
url: loc + "/ReuturnString",
// sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
// json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
data: '{ "para": "' + para + '"}',
// 发送信息至服务器时内容编码类型
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert(msg.d);
$("#content2").text(msg.d);
},
error: function (xhr, textStatus, errorThrown) {
alert("AJAX错误：" + errorThrown);
}
});
}
function sendJsonData3(para) {
var html = "";
// 访问Web服务
var loc = "service/WSAjaxPost.asmx";
$.ajax({
type: "POST",
url: loc + "/ReuturnDataTable",
// sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
// json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
data: '{ "para": "' + para + '"}',
// 发送信息至服务器时内容编码类型
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert(msg.d);
var dtJson = eval(msg.d);
$.each(dtJson, function (i) {
html += "<li><a>" + dtJson[i].Title + "</a>";
});
$("#content3").text("");
$("#content3").append(html);
},
error: function (xhr, textStatus, errorThrown) {
alert("AJAX错误：" + errorThrown);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 0 auto; width: 800px; height: 300px; text-align: center;" align="center">
<table cellpadding="10" cellspacing="1" border="0" class="tab" style="width: 800px;">
<tr>
<td style="text-align: right; width: 50%;">
<asp:TextBox ID="txtInputBoolValue" runat="server" class="text"></asp:TextBox>
</td>
<td style="text-align: left; width: 50%;">
<asp:Button ID="btnAjaxJsonPost" runat="server" Text="Ajax请求的数据结果是Bool" class="button orange" />
</td>
</tr>
<tr>
<td style="text-align: right; width: 50%;">
<asp:TextBox ID="txtInputStringValue" runat="server" class="text"></asp:TextBox>
</td>
<td style="text-align: left; width: 50%;">
<asp:Button ID="btnAjaxStringPost" runat="server" Text="Ajax请求的数据结果是String" class="button orange" />
</td>
</tr>
<tr>
<td style="text-align: right; width: 50%;">
<asp:TextBox ID="txtInputTableValue" runat="server" class="text"></asp:TextBox>
</td>
<td style="text-align: left; width: 50%;">
<asp:Button ID="btnAjaxTablePost" runat="server" Text="Ajax请求的数据结果是BoolDataTable"
class="button orange" />
</td>
</tr>
</table>
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
</form>
</body>
</html>
这里是Web服务中的代码
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace Web.service
{
/// <summary>
/// WSAjaxPost 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WSAjaxPost : System.Web.Services.WebService
{
[WebMethod]
public bool ReuturnJson(string para)
{
string[] userNameArrray = new string[5] { "A", "B", "C", "D", "E" };
// 如果用户存在，就验证合法
if (userNameArrray.Contains(para))
{
return true;
}
return false;
}
[WebMethod]
public string ReuturnString(string para)
{
string name = "";
switch (para)
{
case "a":
name = "A";
break;
case"b":
name = "B";
break;
case "c":
name = "C";
break;
case "d":
name = "D";
break;
}
return name;
}
[WebMethod]
public string ReuturnDataTable(string para)
{
DataTable dt = null;
switch (para)
{
case "1":
dt = CreateTable();
break;
case "2":
dt = GetTable();
break;
}
return Common.JsonHelper.ToJson(dt);
}
private DataTable CreateTable()
{
DataTable dt = new DataTable();
dt.Columns.Add("BookId", typeof(string));
dt.Columns.Add("Title", typeof(string));
dt.Columns.Add("Author", typeof(string));
dt.Columns.Add("Publish", typeof(string));
dt.Rows.Add("1", "持续交付：发布可靠软件的系统方法", "（英） 亨布尔 （Humble，J.），（英） 法利 （Farley，D.） 著 乔梁 译 ", "人民邮电出版社");
dt.Rows.Add("2", "人件集：人性化的软件开发", "（澳） Larry L. Constantine 著 谢超 等 译 ", "机械工业出版社");
dt.Rows.Add("3", "一线架构师实践指南", "温昱 著 ", "电子工业出版社");
dt.Rows.Add("4", "设计模式：可复用面向对象软件的基础", "Erich Gamma 等 著 ", "机械工业出版社");
dt.Rows.Add("5", "重构：改善既有代码的设计", "（美）福勒 著 熊节 译 ", "人民邮电出版社");
return dt;
}
private DataTable GetTable()
{
DataTable dt = new DataTable();
dt.Columns.Add("BookId", typeof(string));
dt.Columns.Add("Title", typeof(string));
dt.Columns.Add("Author", typeof(string));
dt.Columns.Add("Publish", typeof(string));
dt.Rows.Add("1", "持续交付：发布可靠软件的系统方法", "（英） 亨布尔 （Humble，J.）", "人民邮电出版社");
dt.Rows.Add("2", "人件集：人性化的软件开发", "（澳） Larry L. Constantine ", "机械工业出版社");
dt.Rows.Add("3", "一线架构师实践指南", "温昱 著 ", "电子工业出版社");
dt.Rows.Add("4", "设计模式：可复用面向对象软件的基础", "Erich Gamma 等 著 ", "机械工业出版社");
dt.Rows.Add("5", "重构：改善既有代码的设计", "（美）福勒 著 ", "人民邮电出版社");
return dt;
}
}
}
处理的结果如下所示：
这里我使用的数据类型都是JSON格式，其他方式这里都没有讲解。
ASP.NET JQuery Ajax 详解的更多相关文章
- jquery ajax详解
详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...
- Jquery ajax 详解（Day_16）
太在意别人的看法最后会有两种结局,要么自己累死,要么让别人整死. 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 简短地说,在不重载整个网页的情况下,A ...
- $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
[一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- Ajax详解及使用Ajax时的返回值类型有哪些？
Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- ASP.NET 操作Cookie详解 增加，修改，删除
ASP.NET 操作Cookie详解 增加,修改,删除 Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它 ...
- ASP.NET 运行时详解 揭开请求过程神秘面纱
对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛开乌云见晴天,接下来就 ...
随机推荐
- Tomcat的JVM内存大小如何设置？【转】
[转]:专家答疑 Tomcat的JVM内存大小如何设置? 本文和大家重点讨论一下如何设置Tomcat的JVM内存大小,JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存 ...
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
1.原型属性对象于in操作符之in单独使用 有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用中,代码如下: function Person(){ } Person.protot ...
- iis 目录枚举文件枚举解决方案
1.关闭windows的8.3格式功能. 修改注册表键值: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem 修改NtfsD ...
- iOS 常用第三方
MWPhotoBrowser 非常好用的图片浏览器 FDFullscreenPopGesture 用于全屏滑动切换视图 Aspects 用于快速AOP编程 AFNetworking iOS开发中最为火 ...
- git 使用随笔
/*将远端库git@github.com:myrepo/base.git从远端clone到本地*/git clone git@github.com:myrepo/base.git /*克隆版本库的时候 ...
- Lua for Windows入门01
由于项目紧急,我都没来得及研究lua的基本知识就直接持枪上阵了.在实施编写的过程中,却次发现编程语言如此之美,第一次. 随着Lua+for+Windows+5.1.4-45版本的完全安装,最后跳出了一 ...
- ROS服务的理解
服务是节点之间通信的另一种方式,服务允许节点发起一个请求和接收一个响应. 打开终端在里面输入: roscore 查看当前的运行节点: rosnode list 返回结果: /rosout 查看当前的运 ...
- Java学习之字符串练习
1.给定一个字符串数组.按照字典顺序进行从小到大的排序. * 思路: * 1,对数组排序.可以用选择,冒泡都行. * 2,for嵌套和比较以及换位. * 3,问题:以前排的是整数,比较用的比较运算符, ...
- win7 ie10输入网址显示无法显示此页问题的解决
忽然又一天,非常奇怪,所有的浏览器都无法访问网页,直接输入IP也是不行. 本人试过各种方法,包括用360进行修复:清除%temp%下文件:看是否设错了dns, 升级和修复IE,重新注册ie相关的dll ...
- PHP弱类型：WordPress Cookie伪造
1 PHP弱类型 PHP是弱类型语言,所以变量会因为使用场景的不同自动进行类型转换.PHP中用 == 以及 != 进行相等判断时,会自动进行类型转换,用 === 以及 !== 进行判断时不会自动转换类 ...