AJAX

    AJAX 即"Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

$.ajax({　　　　　　　　　　　　　　//这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步的所有功能。

　　　　　　url:"",   　　　　　　　　//数据的提交路径

　　　　　　data{},    　　　　　　　//需要提交的数据

　　　　　　type"",    　　　　　　　 //数据的提交方式：get和post

　　　　　　dataType"",   　　　　　 //服务器返回数据的类型，例如xml,String,Json等  

　　json    [{"key":"value","key":"value"......},{"key":"value","key":"value"......}......] //中间用英文状态的逗号隔开，最后一个没有的逗号

　　    　  success:function(){},    //请求成功后的回调函数

  　　    　　error:function(){}   　　//请求失败后的回调函数

　　　});

　　　具体格式如下：

1、网页端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="tb1" style="background-color: navy; text-align: center; width: 100%;">
        <thead>
            <tr style="color: white;">
                <td>用户名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>生日</td>
                <td>民族</td>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <input type="button" value="加载" id="btn1" />
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        $.ajax({
            url: "ajax/LoadUsers.ashx",  //数据的提交路径
            data: {},                    //需要提交的数据
            type: "post",                //数据的提交方式：get和post
            dataType: "json",            //服务器返回数据的类型，例如xml,String,Json等
            success: function (data) {   //请求成功后的回调函数
                $("#tb1 tbody").empty();
                for (i in data) {
                    var str = "<tr style=\"background-color: white;\">";
                    str += "<td>" + data[i].username + "</td>";
                    str += "<td>" + data[i].password + "</td>";
                    str += "<td>" + data[i].nickname + "</td>";
                    str += "<td>" + data[i].sex + "</td>";
                    str += "<td>" + data[i].birthday + "</td>";
                    str += "<td>" + data[i].nation + "</td>";
                    str += "</tr>";
                    $("#tb1 tbody").append(str);
                }
            },//success
            error: function () {        //请求失败后的回调函数
                alert('服务器连接失败！！！');
            }
        });//ajax
    });//btn1.click
</script>


2、创建一个服务端

 

<%@ WebHandler Language="C#" Class="LoadUsers" %>

using System;
using System.Web;

public class LoadUsers : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        int count = 0;
        string end = "[";
        using (usersDataContext con = new usersDataContext())
        {
            var ulist = con.Name;
            foreach (Name u in ulist)
            {
                if (count > 0)
                {
                    end += ",";
                }
                end += "{\"username\":\"" + u.Username + "\",\"password\":\"" + u.Userpwd + "\",\"nickname\":\"" + u.Usernickname + "\",\"sex\":\"" + u.Usersex + "\",\"birthday\":\"" + u.Userbirthday + "\",\"nation\":\"" + u.Usernation + "\"}";
                count++;
            }
        }

        end += "]";
        context.Response.Write(end);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

 

 

 

　　　　　　　　　　　

posted on 2016-11-13 16:06  皮皮怪  阅读(148)  评论(0)  编辑  收藏  举报

导航