zoukankan html css js c++ java

原生javascript和jquery实现简单的ajax例子

后台C#代码

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

            var data = new T_UsersTableAdapter().GetDataByName(name);
            JavaScriptSerializer jss = new JavaScriptSerializer();

            if (data.Count <= 0)
            {
                var user = jss.Serialize(new Users() { Status = "error", Age = 0 });
                context.Response.Write(user);
            }
            else
            {
                var user = jss.Serialize(new Users() { Status = "ok", Age = data.Single().Age });
                context.Response.Write(user);
            }
        }


        public class Users
        {
            public string Status { set; get; }
            public int Age { set; get; }
        }

html页面

<body>
    <input id="user" type="text" />
    <input id="btnSearch" onclick="search();" type="button" value="查询" />
    <input id="btnSearch1" onclick="search1();" type="button" value="Jquery查询" />
    <div id="userInfo"></div>
</body>

前台javascript和jquery分别实现ajax

<script type="text/javascript">
        function search() {
            var xmlhttp;
            var name = document.getElementById("user").value;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
            }

            xmlhttp.open("post", "HandlerUsers.ashx?name=" + name, false);
            var div = document.getElementById("userInfo");
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        var arr = xmlhttp.responseText;
                        arr = JSON.parse(arr);
                        if (arr.Status == "ok") {
                            div.innerHTML = arr.Age;
                        } else {
                            div.innerHTML = "查找的用户名不存在！";
                        }
                    } else {
                        div.innerHTML = "ajax错误！";
                    }
                }
            }
            xmlhttp.send(); 
        }

        function search1() {
            $(function () {
                var name = $("#user").val();
                var div = $("#userInfo");

                $.post("HandlerUsers.ashx", { "name": name }, function (data, status) {
                    if (status == "success") {
                        var user = $.parseJSON(data);
                        alert(user);
                        if (user.Status == "ok") {
                            div.html(user.Age);
                        } else {
                            div.html("查询的用户名不存在！");
                        }
                    } else {
                        div.html("ajax错误！");
                    }
                });
            });
        }
    </script>

查看全文

相关阅读:
PHP邮件群发程序
 特牛的PHP分页
 短信平台PHP代码一点通
 PHP工厂模式的好处
 PHP单例模式经典讲解
 php excel类，phpExcel使用方法介绍
 php5魔术函数、魔术常量
 PHP设计模式漫谈之工厂模式
 PHP跨站刷票代码
 PHP类的静态(static)方法和静态(static)变量

原文地址：https://www.cnblogs.com/zhxlsuyu/p/3373956.html