zoukankan      html  css  js  c++  java
  • Ajax运用json数组传输数据

    Ajax是目前非常流行的技术之一。很多地方都能用到他,比如在不刷新页面的情况下验证用户名是否已经存在等等。下面是,验证通过后,返回用户各个属性值的方法。

    aspx页面代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
    <script type="text/javascript">
    window.onload = function () {
    var btn = document.getElementById("<%=btnOK.ClientID %>");
    btn.onclick = function () {
    //1.创建XMLHttpRequest
    var xmlHttpRequest = createXMLHttpRequest();
    //2.设置回调函数
    xmlHttpRequest.onreadystatechange = function () {
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
    var XMLDoc = xmlHttpRequest.responseText; //获取服务器端输出的xml,XMLDocument
    var users = eval("(" + xmlHttpRequest.responseText + ")");
    var showDiv = document.getElementById("showUserInfo");
    showDiv.innerHTML = "";
    for (var i = 0; i < users.length; i++) {
    var htmlStr = "<table style='float:left;border:1px solid #000; margin:3px'><tr><td>";
    htmlStr += "真实姓名:" + users[i].Name;
    htmlStr += "</td></tr><tr><td>";
    htmlStr += "登录名:" + users[i].LoginId;
    htmlStr += "</td></tr><tr><td>";
    htmlStr += "年龄:" + users[i].Age;
    htmlStr += "</td></tr><tr><td>";
    htmlStr += "未读信息数:" + users[i].MessageCount;
    htmlStr += "</td></tr><tr><td>";
    htmlStr += "积分数:" + users[i].Score;
    htmlStr += "</td></tr></table>";
    document.getElementById("showUserInfo").innerHTML += htmlStr;
    }

    showDiv.style.display = "";
    }
    }
    //3.初始化xmlHttpRequest
    xmlHttpRequest.open("POST", "Handler.ashx", true);
    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //4.发送请求
    var data = "loginId=" + document.getElementById("<%=txtUserName.ClientID %>").value;
    xmlHttpRequest.send(data);
    return false;
    }
    }


    function createXMLHttpRequest() {
    if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");

    }
    else {
    return new XMLHttpRequest();
    }
    }


    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
    <asp:Button ID="btnOK" runat="server" Text="登陆" />
    </div>
    <div id="showUserInfo" style="font: 12px/20px; display: none;">
    </div>
    </form>
    </body>
    </html>


    再创建一般处理程序 Handler.ashx:

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

    using System;
    using System.Web;
    //using System.Xml.Serialization;
    using System.Text;
    using System.Web.Script.Serialization;
    using System.Collections.Generic;

    public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    string name = context.Request.Form["LoginId"];


    //根据LoginId获取一个用户对象,实际应用中是从业务层获取
    Random r = new Random();

    List<UserInfo> userList = new List<UserInfo>();
    for (int i = 0; i < 10; i++)
    {
    userList.Add(getUserByName(name, r));
    }

    string jsonStr = new JavaScriptSerializer().Serialize(userList);
    context.Response.Write(jsonStr);


    }
    private UserInfo getUserByName(string name, Random r)
    {
    //根据loginId获取一个用户对象,实际应用中是从业务层获取
    UserInfo user = new UserInfo();
    user.Age = r.Next(16, 80);
    user.LoginId = GetRandomString(r);
    user.MessageCount = r.Next(100);
    user.Name = name;
    user.Score = r.Next(100);

    return user;
    }

    public string GetRandomString(Random r)
    {
    char[] chars = { 'a','b','c','d','e','f','g'};
    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < 5; i++)
    {
    sb.Append(chars[r.Next(6)]);
    }
    return sb.ToString();

    }


    public bool IsReusable {
    get {
    return false;
    }
    }

    }


    经验在于积累----武二郎
  • 相关阅读:
    【2017.12.02普及组模拟】送快递
    【NOIP2013模拟联考7】OSU
    顺序表元素位置倒置示例c++实现
    c++字符串排序
    JAVA实现四则运算的简单计算器
    JAVA图形小动画之简单行星运动
    JAVA多线程编程
    ege图形库之简单贪吃蛇(c++)
    ege图形库之动画排序
    c语言中一种典型的排列组合算法
  • 原文地址:https://www.cnblogs.com/zhanghai/p/4461254.html
Copyright © 2011-2022 走看看