Ajax的几种形式和使用情况⭐⭐⭐⭐⭐

Ajax的几种形式：

 $.get(
    "Login.ashx",
     {Name:name,Pwd:pwd,action:x},
     function(data)
       {这里用data的返回值进行if判断}
)

$.ajax({

              type:"post",

              url：“Register.ashx”,

              data:”Name=”+name+”&&Pwd=”+pwd+”&&action=1”,

                //data:{name:name,pwd:pwd,action:2},

                Success:function(data){
                      if (data == "1") {
                            alert("注Á¡é册¨¢成¨¦功|");
                            window.location.href = "GetTime.htm";
                                               }
                       else {alert("注Á¡é册¨¢失º¡ì败ã¨¹");}
                                        }
         })

 $.getJSON(

                "GetJson.ashx",
                { name: $("#uname").val(), action: 2 },
                 function (data) {
                     $("#result tbody").empty();
                     $.each(data, function (index, item) {
                         $("#result tbody").append("<tr><td>" + item.ID + "</td><td>" + item.UserName + "</td><td>" + item.Pwd + "</td></tr>");
 //        $("#result tbody").append("<tr><td>" + item.ID + "</td><td>" + item.UserName + "</td><td>" + item.Pwd + "</td><td><a href='Del.aspx?id="+id+">删¦?除y</a></td><td><a href='Update.aspx?id="+id+"'>修T改?</a></td></tr>");

                     });
                     $("#result").show();
                 });

---------------------------------------------------------------------------------------------------------------

用户名(id=name)，密码(id=pwd)，确认密码(id=confirpwd)，提交(id=btn)

$(function() {

    //就是一个注册事件
    $("#btn").click(function() {
        //点击btn要判断是不是为空，
        var Na = $("#name").val();
        var Pw = $("#pwd").val();
        var ConPwd = $("#confirpwd").val();
        //给一个为空的提示
        var err = "";
        if (Na == "")
        {
            err = err + "用户名不能为空";
        }
        if (Pw == "")
        {
            ere += "密码不能为空";
        }
        if (ConPwd == "")
        {
            err += "确认密码不能为空";
        }
        if (Pw != ConPwd)
        {
            err += "俩次密码不一致";
        }
        if (err != "")
        {
            Alert(err);
            return;
        }
        $.ajax({
            type: "get",
            url: "Hello world.ashx",
            data = "name=" + name + "&pwd=" + pwd,
            success: function(data) {
                if (data == "1")
                {
                    alert("注册成功");
                    window.location.href = "GetTime.htm";
                }
                else
                {
                    alert(注册失败);
                }
            }
        })
    });
});

Ajax=异步JavaScript和xml；

Ajax是通过在后台与服务器进行少量的数据交换，ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

报文指的就是一串数据，就是要传送的的东西

在不同的浏览器中创建对象的方式不同

在IE5/6为：

var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：

var xhr = new XMLHttpRequest();

Ajax在本质上是浏览器端的技术，

Ajax的核心就是创建XMLHttpRequest对象

1. XMLHttpRequest xhr=new XmlHttpRequest(); 创建对象(new 叫助手过来)

2. xhr.Open("post","Hello world.html",ture);创建请求(open 告诉他要做的事)

3. xhr.send("name="+name.value);发送请求(send 去吧)，附带传参数

 异步使用XMLHttpRequest对象时， 必须使用onreadyStatechange事件　１． 创建一个对象　２． 设置onreadyStatechange事件， 触发一个回调函数
 xhr.onreadyStatechange = watching;

 function watching()
 {}
 xhr.onreadyStatechange = function()
 {
     if(xhr.readyState == 4) 请求状态
     {
         if(xhr.Status == 200) 服务器返回的状态码
         {
             var span = document.getelementById("ename");
             span.innerHtml = xhr.responseText;
         }
     }
 }

----查询ID，展现出账号密码

用户名： < input type = "text"
id = "uid" > < input type = "botton"
id = "btn"
value = "查询" > < table id = "result" > < tr > < td > ID < /td><td>用户名</td > < td > 密码 < /td></tr > < /table> < script > $(function()
{
$("#Btn").clicl(function()
{
    var id = $("#uid").val();
    if(id == "")
    {
        return;
    }
    $.getJSON("GetJson.ashx",
    {
        ID: id
    }, function(data)
    {
        $("#result tbody").append("<tr><td>" + data.ID + "</td><td>" + data.UserName + "</td><td>" + data.UserName + "</td></tr>");
        $("#result").show();
    })
})
}) < /script> 
int id = Convert.ToInt32(context.Request["ID"]); //接受前台的传值过来
UserBll userbll = new UserBll();
UsersModel user = new UsersModel();
user = userbll.GetModel(id);
string s = "{ID:" + user.ID + ",name:" + userName.UserName + ",pwd:" + user.Pwd + "}";
//JavaScriptSerializer js = new JavaScriptSerializer();
// string s = js.Serialize(user);
context.Response.write(s);

-----------------------------------------

获取时间

<input type="button" id="GetTime" values="获取时间" />
<div id="ShowTime"></div>
<script>
window.onload = function()
{
    var BtnTime = document.getElementById("#GetTime");
    BtnTime.onclick = function()
    {
        var showTime = document.GetElementById("ShowTime");
        var xhr;
        xhr = new XMLHttpRequest();
        xhr.open("get", "Gettime.ashx?name=" + "2b", ture),
            xhr.send();
        xhr.onreadystatechange = function()
        {
            if(xhr.readyState == 4)
            {
                if(xhr.status == 200)
                {
                    showTime.innerHTML = xhr.responseText;
                }
            }
        }
    }
}
</script>
|| || || || || || || || || ||
string name = context.Request["name"]; context.Response.write(name + "你好，现在时间是" + DateTime.Now.ToString());

---------------

<script>
    window.onload = function() {

        var uname = document.GetElementById("uname");
        uname.onblur = function() {
            if (uname.value == "")
            {   return;   }
            else
            {
                var xhr = new XMLHttpRequest();
                xhr.open("post", "Regiater.ashx", ture),
                xhr.send("name=" + uname.value + "&action=1");
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4)
                    {
                        if (xhr.status == 200)
                        {
                            var span = document.getElementById("ename");
                            span.innerHTML = xhr.responseText: +"日期" + xhr.getRequestHeader("date");
                            span.innerHTML = xhr.responseText;
                        }
                    }
                }
            }
        }
    }

$(function() {
    $("btnReg").click(function() {
        var name = $("uname").val();
        var pwd = $("upwd").val();
        var repwd = $("#repwd").val();
        var span = $("#ename").val();
        var err = "";
        if (span != "") {
            err = err + "用户名已存在";
        }
        if (name == "") {
            err += "用户名不能为空！\n";
        }

        if (pwd == "") {
            err += "密码不能为空\n";
        }

        if (repwd == "") {
            err += " 确认密码不能为空\n";
        }

        if (pwd != repwd) {
            err += "俩次密码不一样\n";
        }

        if (err != "") {
            alert(err);
            return;
        }

        $.ajax({})

        $.ajax({

            type: "post",
            url: "Regiter.ashx",
            data: "name=" + name + "&pwd=" + pwd + "&action=2",
            //data:{name:name,pwd:pwd,action:2},
            success: function(data) {
                if (data == "1")
                {
                    alter("注册成功");
                    window.location.href = "GetTime.html";
                }
                else
                {
                    alert("注册失败");
                }
            }
        })
    })
})
< script >

<table>
    <tr>
        <td> 用户名：</td>
        <td><input type="text" id="uname"><span id="ename"></span> </td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="password" id="upwd" /></td>
    </tr>
    <tr>
        <td>确认密码:</td>
        <td><input type="password" id="repwd" /> </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="注册" id="btnReg" />
        </td>
    </tr>
</table>

UsersBll userbll = new UsersBll();
//context.Response.Write("Hello World");
#region
string uname = context.Request["name"]; //接受data里的name；
string pwd = context.Request["pwd"];
string action = context.Request["action"];
if(action == "1") //验证用户名是否存在
{
    bool tag = userbll.Exist(uname); //bll里都是方法
    if(tag)
    {
        context.Response.Write("用户名存在");
    }
    else
    {
        context.Response.Write("");
    }
}
else if(action == "2") //注册用户，执行注册代码
{
    UsersModel user = new UsersModel();
    user.UserName = uname;
    user.Pwd = pwd;
    int result = userbll.Add(user);
    if(result > 0)
    {
        context.Response.Write(1); //去前台
    }
    else
    {
        context.Response.Write("注册失败");
    }
}

posted @ 2017-12-28 22:18 ProZkb 阅读(565) 评论(0) 编辑收藏举报

刷新页面返回顶部

Prozkb

Ajax的几种形式和使用情况⭐⭐⭐⭐⭐

公告

Prozkb

Ajax的几种形式 和使用情况⭐⭐⭐⭐⭐

公告

Ajax的几种形式和使用情况⭐⭐⭐⭐⭐