jQuery.ajax

(摘录)http://www.cnblogs.com/XuebinDing/archive/2012/03/01/2376041.html

情况一、使用WebService验证

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;

3.无参数的方法调用.

大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码：

[WebMethod]     
public static string SayHello()     
{     
     return "Hello Ajax!";     
}    

    var arr = param.split(',');
        var p0 = arr[0];
        var id1 = parseInt(arr[1]);
        var ope2 = parseInt(arr[2]);
        if (ope2 == 3) {
            $.messager.confirm('提示信息', '是否删除？', function (r) {
                if (r) {
                    $.ajax({
                        type: 'post',
                        url: 'ModifyRdrecord',
                        data: { p: p0, id: id1, ope: ope2 },
                        dataType: 'json',
                        cache: false,
                        global: false,
                        success: function (data) {
                            if (data.result > 0) {
                                $.messager.alert('提示信息', '删除成功！', 'info', function () {
                                    $("#" + p0 + "dataGrid").datagrid('reload');
                                });
                            } else {
                                $.messager.alert('提示信息', '删除失败！', 'error');
                            }
                        }
                    });
                }
            });

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            //要用post方式      
            type: "Post",     
            //方法所在页面和方法名      
            url: "Demo.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;     
    });     
});   

页面代码：

    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnOK" runat="server" Text="验证用户" />
    </div>
    </form>

运行效果如下： 

3.有参数方法调用
后台代码：

[WebMethod]     
public static string GetStr(string str, string str2)     
{     
    return str + str2;     
} 

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.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;     
    });     
});    

运行效果如下：

4.返回数组方法
后台代码：

[WebMethod]     
public static List<string> GetArray()     
{     
    List<string> li = new List<string>();     
    
    for (int i = 0; i < 10; i++)     
        li.Add(i + "");     
    
    return li;     
}    

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.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;     
    });     
}); 

页面代码：

<form id="form1" runat="server">

<div>

    <asp:Button ID="btnOK" runat="server" Text="验证用户" />

</div>

<ul id="list">

</ul>

</form>

运行结果图：

(摘录):http://www.cnblogs.com/lmfeng/archive/2012/03/20/2407412.html

情况二、cs后台验证

一：jQuery.ajax语法基础

jQuery.ajax([options])
概述：通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。
数据类型
$.ajax() 函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中，text和xml类型返回的数据不会经过处 理。如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型，则会把获取到的数据作 为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。发送数据到服务器，默认情况下，Ajax请求使用GET方法。如果要使用 POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
使用场景一：
描述:保存数据到服务器，成功时显示信息。jQuery 代码:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
使用场景二：
描述:装入一个 HTML 网页最新版本。jQuery 代码:
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

load(url, [data], [callback])
概述：载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
使用场景一：
描述:加载 feeds.html 文件内容。jQuery 代码:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述：通过远程 HTTP GET或POST  请求载入信息。
这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
描述:显示 test.aspx 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。jQuery 代码:
$.get("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

上面是基本的语法，我们只是先做一个了解，要是你已经熟悉，那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。

二：jQuery.ajax伴随ASP.NET的实战练习

首先创建Default.aspx页面，作为请求发起页面，并会获得返回值。页面的代码Default.aspx是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="jsjquery-1.6.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
        $(document).ready(function () {
            $("#showinfo").click(function () {
                var data = { key1: "小王01", key2: "小明" };
                //1、response.aspx页面 接收数据
                $.ajax({
                    type: "post",
                    url: "response.aspx",
                    data: data,
                    dataType: "text",
                    success: function (msg) {
                        $("#ajax").append(msg);
                    }
                });

                //2、test.htm静态页面 接收数据
                $.ajax({
                    type: "get",  //get默认 可以省略
                    url: "test.htm",
                    success: function (msg) {
                        $("#resulthtml").append(msg);
                    }
                });

                //load()方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
                //$("#load").load("test.htm");
                //$("#load").load("TextJson.txt");

                $.get("response.aspx", data, success1, "text");
                function success1(msg) {
                    $("#get").append(msg);
                }
                $.post("response.aspx", data, success2, "text");
                function success2(message) {
                    $("#post").append(message);
                }

                $.get("TextJson.txt", success3, "json");
                function success3(msg) {
                    var result = "<li>334一号床:" + msg.key1 + "</li>";
                    result += "<li>334二号床:" + msg.key2 + "</li>";
                    result += "<li>334三号床: " + msg.key3 + "</li>";
                    result += "<li>334四号床: " + msg.key4 + "</li>";
                    $("#result").html(result);
                }
            });
        });
    </script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
<input type="button" id="showinfo" value="show info"></input> 
     <ul id="ajax">ajax:</ul>
     <ul id="resulthtml">resulthtml:</ul>
     <ul id="load">load:</ul>     
     <ul id="get">get:</ul>
     <ul id="post">post:</ul>
     <ul id="result"></ul>
     
</body>
</html>

Default.aspx.cs里面有没写任何代码，默认即可。
请求的接受者这里面有三种角色：response.aspx页面、test.htm静态页面和TextJson.txt。

response.aspx页面：主要是在服务器端获得客户端提交的数据，并返回数据给客户端。
test.htm静态页面：主要是给客户端局部装入一个HTML网页最新版本。
TextJson.txt：是作为数据储存在文件中，让客户端来异步访问的。

response.aspx页面代码，response.aspx是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

没有任何html代码，因为主要是在服务器端获得客户端提交的数据，并返回数据给客户端，不需要显示html内容，所以可以不含html标记。
response.aspx.cs页面代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;

namespace JqueryAjax2
{
    public partial class response : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string str = Request["key1"];
            Response.Write("success" + str);
        }
    }
}

在代码中可以看到服务器端获得客户端提交的数据，并返回数据给客户端的方式。

test.htm静态页面的代码是：

<!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>
    <title></title>
</head>
<body>
test.html
</body>
</html>

当静态页面被请求后，会作为html的格式返回客户端，使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。

TextJson.txt里面保存着一段文本，是json格式的：

{   "key1": "刘明丰",   "key2": "林望",   "key3": "陈文杰",   "key4": "耿殿佳" }

在被访问后返回的是json格式的数据，在客户端获得json后会自动转换成对象。

好了，jQuery的异步使用场景基本满足我们的需求，自己试试看吧。