首页 > 代码库 > Ajax1

Ajax1

2024-08-20 17:05:48   220人阅读

一、Ajax是什么？

全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览

器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以

Web服务器的处理时间也减少了。

二、Ajax基本过程和格式

1、引入JQuery文件

2、js中ajax的格式



var ss = $(this).val().trim();//取值
        if (ss.length <= 0) {
            return false;
        }


$.ajax({


            url: "ajax/yong.ashx",//将数据提交到服务端
            data: { "un": ss },//提交的数据
            type: "post",//提交的方式
            dataType: "json",//返回的数据类型
            success: function (aa) //没错时，返回数据执行的语句
            {
                if (aa.has == "0") {
                    $("#Label1").text("可用").css("color", "green");
                }
                else {
                    $("#Label1").text("已存在").css("color", "red");
                }
            },//success
            error:function(){alert("连接服务端失败！");}//如果出错执行的语句
        });//ajax




3、创建LinQ


4、创建服务端


添加一般处理程序 后缀.ashx


导入命名空间




 string uname=context.Request["un"];//获取传入的值
        string end="{\"has\":\"0\"}";//创建ajax对象
       //数据库查询
        using(LinQlianxiDataContext con=new LinQlianxiDataContext())
        {
        var u=con.Users.Where(z=>z.UserName==uname).AsEnumerable();
            if(u.Count()>0){
            end="{\"has\":\"1\"}";
            }       
        }
        context.Response.Write(end);//返回json
        context.Response.End();//结束输出




注：（1）xml和json的作用：在不同语言之间进行数据传递


最早使用的数据类型是 xml
劣势：
	a、代码量较大
	b、结构不清晰
	c、解析起来麻烦


现在使用的数据类型是 json
优势：
	a、结构清晰
	b、类似于面向对象的解析方式


(2)json基本格式：


{"key":"value","":"","":""}


多个对象时[{"key":"value","":"","":""},{"key":"value","":"","":""},...,{"key":"value","":"","":""}]


三、展示表格


HTML代码


技术分享



 <table style="background-color:navy;text-align:center;width:90%;margin:auto;">
       <thead>
           <tr style="color:white;">
               <td>用户名</td>
               <td>密码</td>
               <td>昵称</td>
               <td>性别</td>
               <td>出生日期</td>
               <td>民族</td>
           </tr>
       </thead>
       <tbody>         
       </tbody>
   </table>
        <asp:Button ID="Button1" runat="server" Text="加载" />



View Code


js代码




 $("#Button1").click(function () {
        $.ajax({
            url: "sanji.ashx",
            data: {},
            type: "post",
            dataType: "json",
            success: function (data) {
                $("#bd tbody").empty();//清空，防止重复加载
                for (i in data) {
                    var ss = "<tr style=\"background-color:white;\">";
                    ss += "<td>" + data[i].usersname + "</td>";
                    ss += "<td>" + data[i].mima + "</td>";
                    ss += "<td>" + data[i].nc + "</td>";
                    ss += "<td>" + data[i].sex + "</td>";
                    ss += "<td>" + data[i].bir + "</td>";
                    ss += "<td>" + data[i].nation + "</td>";
                    ss += "</tr>";
                    $("#bd tbody").append(ss);
                }

            },//success
            error: function () { alert("连接服务端shibai！"); }
        });//ajax
        return false;//我使用的Button不是使用表单元素，这句必须有！！！
    });//click




一般处理程序




//引入的命名空间
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Text;
//代码
int count = 0;//作用是判断需不需加","
        StringBuilder str = new StringBuilder();//省内存
        str.Append("[");
        using(LinQlianxiDataContext con=new LinQlianxiDataContext())
        {           
            var list = con.Users.AsEnumerable();
            foreach(Users u in list)
            {
                if (count > 0)
                {
                    str.Append(",");
                }
       //拼写时注意！！注意！！注意！！另外在这里扩展属性
                str.Append("{\"usersname\":\"" + u.UserName + "\",\"mima\":\"" + u.PassWord + "\",\"nc\":\"" + u.NickName + "\",\"sex\":\"" + u.Sexstr + "\",\"bir\":\"" + u.Birthdaystr + "\",\"nation\":\"" + u.Nationname+ "\"}");
                count++;
            }       
        }
        str.Append("]");
        context.Response.Write(str);
        context.Response.End();




四、三级联动


注意：异步导致程序不是按代码顺序执行




//页面加载时调用执行


hanshu("0001", $("#DropDownList1"),"1");


//封装的方法，参数1：父级编号；参数2：控件；参数3：对应省市区   
 function hanshu(p,drop,n) { 
$.ajax({


            url: "ajax/sanji.ashx",
            data: { "pcode":p},
            type: "post",
            dataType: "json",
            success: function (data) {
                drop.empty();
              //省调用这个函数时执行n=="1"
                if(n=="1"){
                for(i in data)
                {
                    var ss = "<option value=http://www.mamicode.com/""+data[i].acode+"\">"+data[i].aname+" </option>";
                    drop.append(ss);
                }               
                hanshu($("#DropDownList1").val(), $("#DropDownList3"), "2"); //省改变时改变市           
                }//n==1
              //市调用这个函数时执行n=="2"
                if (n == "2") {
                    for (i in data) {
                        var ss = "<option value=http://www.mamicode.com/"" + data[i].acode + "\">" + data[i].aname + " </option>";
                        drop.append(ss);
                    }
                    
                    hanshu($("#DropDownList3").val(), $("#DropDownList2"), "3");//市改变时改变区
                }//n==2
             //区调用这个函数时执行n=="3"
                if (n == "3") {
                    for (i in data) {
                        var ss = "<option value=http://www.mamicode.com/"" + data[i].acode + "\">" + data[i].aname + " </option>";
                        drop.append(ss);
                    }                  
                }//n==3
            },//success
            error: function () { alert("连接服务端错误！！");}
        });//ajax
    }
//省改变事件
    $("#DropDownList1").change(function () {
        hanshu($(this).val(), $("#DropDownList3"), "2");
    });
//市改变事件
    $("#DropDownList3").change(function () {
        hanshu($(this).val(), $("#DropDownList2"), "3");
    });




 
Ajax1






























        

            
                
                  
                
                

                    联系

                    我们