zoukankan      html  css  js  c++  java
  • ajax测试Demo以及json简单的转化

    Ajax是局部刷新,并不影响页面其他的操作

    实例1:本测试是演示利用Ajax在一个页面播放视频,点击赞和踩按钮,视频不会受影响,

    新建一个ajaxTest.html页面

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript">
            function zan()
            {
                var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象,考虑兼容性
                xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4)    //readyState==4表示服务器返回数据了额,之前可能经历  2(请求已发生,正在处理中)3表示(响应中有部分数据可以用,拂去其还没有完成响应的生成)
                    {
                        if (xmlhttp.status == 200)  //状态码200位成功
                        {
                            document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文
                        }
                        else {
                            alert("ajax服务器返回错误");
                        }
                    }
                }
                xmlhttp.send();//这时才发送请求,发送完请求,并一定马上服务器响应,然后看上面的onreadystatechange状态,发送完继续执行下面的操作,不等服务器
            }
    
            function cai()
            {
                ajax("AjaxTest.ashx?action=Cai", function (reText) {
                    document.getElementById("CaiCount").innerHTML = reText;
                })
            }
            </script>
    </head>
    <body>
        <video src="video.mp4" controls="controls"></video>
            <p><input type="button" name="Zan" value="" onclick="zan()"/><label id="ZanCount"></label></p>
            <p><input type="button" name="Cai" value=""onclick="cai()"/><label id="CaiCount"></label></p>
    </body>
    </html>

    然后新建一个后台处理程序AjaxTest.ashx

    string action = context.Request["action"];
    if (action == "Zan") //赞加1
    {
    SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");
    int zanCount = (int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");
    context.Response.Write(zanCount);
    }
    else//踩加1
    {
    SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
    int caiCount = (int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
    context.Response.Write(caiCount);
    }
    

      数据库test,新建表T_ZanCai

    上面的ajax都有很多相似的部分,可以吧ajax封装起来

    新建js文件夹,下新建ajax.js

    function ajax(url, onsuccess)
    {
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象,考虑兼容性
    
        xmlhttp.open("POST", url, true);//准备向服务器发出post请求
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4)    //readyState==4表示服务器返回数据了额,之前可能经历  2(请求已发生,正在处理中)3表示(响应中有部分数据可以用,拂去其还没有完成响应的生成)
            {
                if (xmlhttp.status == 200)  //状态码200位成功
                {
                    //responseText是服务器返回的报文正文
                    onsuccess(xmlhttp.responseText);
                }
                else {
                    alert("ajax服务器返回错误");
                }
            }
        }
        xmlhttp.send();//这时才发送请求,发送完请求,并一定马上服务器响应,然后看上面的onreadystatechange状态,发送完继续执行下面的操作,不等服务器
    }

    实例2:简单的用户注册页面,ajax检测用户名是否已被注册,没有注册功能,只是检测用户名是否合法

    注册页面Register.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>用户注册用户名ajax检测是否已用</title>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript">
            function checkUserName()
            {
                var userName = document.getElementById("UserName").value;
                ajax("checkuserName.ashx?UserName=" + userName, function (resText) {
                    if (resText == "ok")
                    {
                        document.getElementById("UserNameMsg").innerHTML="用户名可用";
                    }
                    else if(resText == "error")
                    {
                        document.getElementById("UserNameMsg").innerHTML = "用户名不可用";
                    }
                    else if (resText == "forbidden")
                    {
                        document.getElementById("UserNameMsg").innerHTML = "用户名含有禁词,请换用其他用户名";
                    }
                });
            }
    
        </script>
    </head>
    <body>
        <form action="Register.ashx">   
            用户名:<input type="text" id="UserName" name="UserName" onblur="checkUserName()"/><span id="UserNameMsg" style="color:red"></span><br>
            密码:<input type="password"/>
        </form>
    
    </body>
    </html>

    ajax 后台处理checkUserName.ashx

     string userName=context.Request["UserName"];            
                if(userName.Contains("国家") || userName.Contains("管理员"))
                {
                    context.Response.Write("forbidden");
                }
                int count = (int)SqlHelper.ExecuteScalar("select count(*) from tab_user where name=@UserName", new SqlParameter("@UserName", userName));
                if (count <= 0)
                {
                    context.Response.Write("ok");
                }
                else
                {
                    context.Response.Write("error");
                }

    实例三:Json的使用:

    C# 将.net对象转为json字符串,然后在前台页面js解析json为javascript对象使用

    新建Person.cs类

     public class Person
        {
            public string Name { get; set; }
            public int Age { get; set; }
            public string Email { get; set; }
        }

    jsonTest.ashx代码:

     List<Person> list =new List<Person>();
                list.Add(new Person { Name="hyb",Age=11,Email="111@q.com"});
                list.Add(new Person { Name = "aa", Age = 11, Email = "221@q.com" });
                list.Add(new Person { Name = "bb", Age = 11, Email = "23331@q.com" });
                //将对象序列号为json字符串的方法
                JavaScriptSerializer jss=new JavaScriptSerializer();
                string json=jss.Serialize(list);
                //string json = jss.Serialize(new Person { Name="哈哈",Age=23,Email="12345@qq.com"});
    
                context.Response.Write(json);

    jsonTest.html前台代码:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script src="js/json2.js"></script>
        <script type="text/javascript" >
            function go()
            {
                ajax("jsonTest.ashx", function (resText) {
                    //把json字符串转为javascrip对象
                    var person = JSON.parse(resText);
                    for (var i = 0; i < person.length; i++)
                    {
                        var p=person[i];
                        alert("姓名:"+p.Name+"年龄:"+p.Age+"邮箱:"+p.Email);
                    }
                });
            }
    
        </script>
    </head>
    <body onload="go()">
    </body>
    </html>

    注意:一般浏览器支持JSON.parse,不支持的引用json2,js就可以了

  • 相关阅读:
    数据预处理和特征工程
    批量梯度下降,随机梯度下降,小批量梯度下降
    动态规划和贪心算法的区别
    广告计价方式:CPM,CPC,CPA
    隐语义模型LFM
    windows下安装xgboost
    KMP算法
    sklearn中的SGDClassifier
    JS变量和数据类型
    JS的基本使用 使用外部的JS文件
  • 原文地址:https://www.cnblogs.com/DonAndy/p/5986001.html
Copyright © 2011-2022 走看看