2017-6-5 ajax 基本结构，数据加载，服务端及json

1、ajax是什么？：AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）；

在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。

2、ashx - 一般处理程序

3、在不同的语言之间传递数据
xml - 可扩展的标记语言
json - 数据格式
对象格式："{"key":"value","key":"value"}"
数组格式："[{"key":"value"},{},{}]"

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <title></title>
</head>
<body>
    <input type="text" id="txt1" placeholder="请输入用户名" />
    <span id="txt1_msg"></span>

</body>
</html>
<script type="text/javascript">

    $("#txt1").keyup(function () {

        var s = $(this).val();
        if (s.length < 6)
        {
            $("#txt1_msg").text("用户名不可以小于6位！");
            return;
        }

        $.ajax({

            url: "Handler.ashx",
            data:{"uname":s},
            type: "post",
            dataType: "json",
            success: function (msg) {

                if (msg.has == 'false') {
                    $("#txt1_msg").text("恭喜！用户名可用");
                    $("#txt1_msg").css('color','green');

                }
                else
                {
                    $("#txt1_msg").text("用户名已被占用！！");
                    $("#txt1_msg").css('color', 'red');
                }
            }




        });



    });




</script>

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

using System;
using System.Web;
using System.Linq;
public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        string end = "{\"has\":\"false\"}";
        string s=context.Request["uname"];
        using(DataClassesDataContext con=new DataClassesDataContext())
        {
          users u=  con.users.Where(r=>r.username==s).FirstOrDefault();
            if(u!=null)
            {
                end = "{\"has\":\"true\"}";
            }
        }
        context.Response.Write(end);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <title></title>
</head>
<body>
    <input  type="button" value="加载数据" id="btn1"/>
    <input  type="button" value="添加用户" id="btn2"/>
    <input type="button" value="修改" id="btn3" />
    <input type="button" value="删除" id="btn4" />
    <table id="tb1" style="width:100%; text-align:center;background-color:navy;"  >
        <thead>
            <tr style="color:white;">
                <td>用户名</td>
                 <td>密码</td>
                 <td>昵称</td>
                 <td>性别</td>
                 <td>生日</td>
                 <td>民族</td>
               
            </tr>
        </thead>
        <tbody id="tbody1">
           

        </tbody>

    </table>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        
    $.ajax({
        url: "Handler2.ashx",
        data: {},
        type: "post",
        dataType: "json",
        async:false,
        success: function (msg) {
            $("#tbody1").html("");
            //alert(msg.length);
            for (var i = 0; i < msg.length; i++)
            {
                var str="  <tr style=\"background-color:white;\">"
                str+=" <td>"+msg[i].username+"</td>";
                str+=" <td>"+msg[i].password+"</td>";
                str+="<td>"+msg[i].nickname+"</td>";
                str+="<td>"+msg[i].sex+"</td>";
                str+="<td>"+msg[i].birthday+"</td>";
                str += "<td>" + msg[i].nation + "</td>";
                str += " </tr>";
                $("#tbody1").append(str);
            }

        },
        error: function () {
            alert("err");
        },
        beforeSend: function ()
        {
            $("#btn1").attr("disabled", "disabled");
            $("#btn1").val("加载中......");
        },
        complete: function ()
        {
            $("#btn1").removeAttr("disabled");
            $("#btn1").val("加载数据");
        }

    });
    });
    $("#btn2").click(function () {

       
    });

</script>

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class Handler2 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        System.Threading.Thread.Sleep(2000);
        StringBuilder str = new StringBuilder();
        str.Append("[");
        //string end = "[";
using(DataClassesDataContext con=new DataClassesDataContext())
{
    List<users> ulist = con.users.ToList();
    int count = 0;
    foreach(users u in ulist)
    {
        if (count > 0) { str.Append(","); }
        //end += "{\"username\":\""+u.username+"\",\"password\":\""+u.password+"\",\"nickname\":\""+u.nickname+"\",\"sex\":\""+u.sex+"\",\"birthday\":\""+u.birthday+"\",\"nation\":\""+u.nation+"\"}";
        str.Append("{\"username\":\"" + u.username + "\",\"password\":\"" + u.password + "\",\"nickname\":\"" + u.nickname + "\",\"sex\":\"" + u.sex + "\",\"birthday\":\"" + u.birthday + "\",\"nation\":\"" + u.nation + "\"}");
        count++;
    }
    
}
//end += "]";
str.Append("]");

        context.Response.Write(str);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

posted on 2017-06-07 09:51 口袋里的SKY 阅读(144) 评论(0) 编辑收藏举报