ajax入门基础

一、简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

AJAX通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、基本结构

1、新建Linq（数据库信息封装绑定）

2、组键json对象(数据库数据加载到后台)

对象格式："{"key":"value","key":"value"}"
数组格式："[{"key":"value"},{},{}]"

例：

using System;
using System.Web;
using System.Text;
using System.Linq;
using System.Collections.Generic;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        StringBuilder str = new StringBuilder();
        str.Append("[");

        //string s = context.Request["id"];
        int count = 0;
        using (StudentDataContext con = new StudentDataContext())
        {
            List<Users> ulist = new List<Users>();

            ulist = con.Users.ToList();
            foreach (Users us in ulist)
            {
                count++;
                if (count < ulist.Count)
                {
                    str.Append("{"ids":"" + us.Ids + "","username":"" + us.Username + "","password":"" + us.Password + "","nickname":"" + us.Nikename + "","sex":"" + us.Sex + "","birthday":"" + us.Birthday + "","nation":"" + us.Nation + "","num":"" + us.Ids + ""},");

                }
                else
                {
                    str.Append("{"ids":"" + us.Ids + "","username":"" + us.Username + "","password":"" + us.Password + "","nickname":"" + us.Nikename + "","sex":"" + us.Sex + "","birthday":"" + us.Birthday + "","nation":"" + us.Nation + "","num":"" + us.Ids + ""}");
                }
            }

        }
        str.Append("]");
        context.Response.Write(str);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Josn

table id="tb1" style=" text-align: center; 100%;"> 2 <thead> 3 <tr style="color: #ff6a00;"> 4 <td>用户名</td> 5 <td>密码</td> 6 <td>昵称</td> 7 <td>性别</td> 8 <td>生日</td> 9 <td>年龄</td> 10 <td>民族</td> 11 </tr> 12 </thead> 13 <tbody> 14 </tbody> 15 </table> 16 <input type="button" value="加载" id="btn1" /> 复制代码复制代码

编写ajax语句,将数据提交到某个服务端去 2 $.ajax({ 3 url: "ajax/Login.ashx",//将数据要提交到哪个服务端 4 data: { "un": $("#txt_uname").val().trim(), "pwd": $("#txt_pwd").val() },//将什么数据提交到服务端去,{}内基本格式为"key":"要传的数据" 5 type: "post",//用什么样的方式将数据提交过去 6 dataType: "json",//返回一个什么样的数据类型 7 success: function (data) {//请求完成 8 if (data.has == '1') { 9 $("#btn1").attr("disabled", "disabled").val('跳转中...'); 10 window.setTimeout(function () { 11 window.location.href = "HtmlPage2.html"; 12 }, 3000); 13 } 14 else { 15 $("#sp1").text("用户名密码输入错误！"); 16 $("#btn1").removeAttr("disabled").val('登录'); 17 } 18 }, 19 error: function () {//服务器连接错误 20 $("#sp1").text("服务器连接失败！"); 21 $("#btn1").removeAttr("disabled").val('登录'); 22 }, 23 beforeSend: function () {//已向服务器发送请求，请求完成前 24 $("#btn1").attr("disabled", "disabled").val('登录中...'); 25 }, 26 complete: function () {//请求完成后，可有可无 27 $("#btn1").removeAttr("disabled").val('登录'); 28 } 29 30 31 }); 复制代码

相关推荐