码迷,mamicode.com
首页 > Web开发 > 详细

ajax 基础

时间:2016-11-14 02:02:36      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:失败   使用   play   linq   foreach   sed   编程   get   提交   

一、简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

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

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

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

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

xml和json的作用:在不同语言之间进行数据传递


最早使用的数据类型是 xml
劣势:
1、代码量较大
2、结构不清晰
3、解析起来麻烦

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

json基本格式:
{"key":"value","":"","":""}

三、ajax应用实例

ajax展示数据库所有数据:

1.body中的代码

<table style="background-color:navy;text-align:center;width:90%;margin:auto;" id="tb1">
        <thead>
            <tr style="color:white;">
                <td>用户名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>生日</td>
                <td>民族</td>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>

    <input type="button" id="btn1" value="添加" />

2.js代码

<script type="text/javascript">
    $("#btn1").click(function () {
        $.ajax({
            url: "ajax/LoadUsers.ashx",//将数据要提交到哪个服务端
            data: {},//将什么数据提交到服务端去
            type: "post",//用什么样的方式将数据提交过去
            dataType: "json",//返回一个什么样的数据类型
            success: function (data) {      //success
                $("#tb1 tbody").empty();
                for (i in data)
                {
                    var str = "<tr style=\"background-color:white;\">";
                    str += "<td>" + data[i].username + "</td>";
                    str += "<td>" + data[i].password + "</td>";
                    str += "<td>" + data[i].nickname + "</td>";
                    str += "<td>" + data[i].sex + "</td>";
                    str += "<td>" + data[i].birthday + "</td>";
                    str += "<td>" + data[i].nation + "</td>";
                    str += "</tr>";

                    $("#tb1 tbody").append(str);
                }


            },//success
            error: function () {
                alert(服务器连接失败!!!);
            }

        });//ajax
    });//btn1.click
</script>

  在js代码中,书写url链接地址时要注意仔细;在写success中的str字符串时,应注意其中的属性名不可写错;最后可以写error来方便找错。

3.LoadUsers.ashx代码

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

public class LoadUsers : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        int count = 0;        
        string end = "[";
        
        
        using (Data0720DataContext con = new Data0720DataContext())
        {
            var ulist = con.Users;
            foreach(Users u in ulist)
            {
                if (count > 0)
                {
                    end += ",";
                }
                end += "{\"username\":\""+u.UserName+"\",\"password\":\""+u.PassWord+"\",\"nickname\":\""+u.NickName+"\",\"sex\":\""+u.Sex+"\",\"birthday\":\""+u.Birthday+"\",\"nation\":\""+u.Nation+"\"}";
                
                count++;
            }
        
        }
        end += "]";

        context.Response.Write(end);//将json返回出去
        context.Response.End();//结束输出
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

在此部分的内容中,应注意的是:json字符串的拼写,其中,应格外注意转义字符(\),双引号("")以及每行最后的逗号的位置,逗号的英文状态,并且,在输出多行数据时,应注意在字符串两侧加上([])。

ajax实现省市区三级联动

技术分享
<div>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
            <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList>
        </div>
body
技术分享
<script type="text/javascript">
    bind1($("#DropDownList1"), 0001, 1);

    function bind1(drop, pc, aa) {
        $.ajax({
            url: "ajax/China.ashx",
            data: { "pcode": pc },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (aa == 1) {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                    bind1($("#DropDownList2"), $("#DropDownList1").val(), 2);
                    bind1($("#DropDownList3"), $("#DropDownList2").val(), 3);
                }
                if (aa == 2) {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                    bind1($("#DropDownList3"), $("#DropDownList2").val(), 3);
                }
                if (aa == 3) {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                }
            },
            error: function () {
                alert(服务器连接失败!);
            }
        });

    }

    $("#DropDownList1").change(function () {
        bind1($("#DropDownList2"), $(this).val(), 2);
    });

    $("#DropDownList2").change(function () {
        bind1($("#DropDownList3"), $(this).val(), 3);
    });


</script>
jquery
技术分享
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;

public class China : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string pcode = context.Request["pcode"];
        System.Text.StringBuilder end = new StringBuilder();
        int count = 0;

        end.Append("[");
        using (mydbDataContext con = new mydbDataContext())
        {
            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList();

            foreach (ChinaStates c in clist)
            {
                if (count > 0)
                    end.Append(",");

                end.Append("{\"code\":\"" + c.AreaCode + "\",\"name\":\"" + c.AreaName + "\"}");
                count++;
            }
        }

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

}
China.ashx

 

ajax 基础

标签:失败   使用   play   linq   foreach   sed   编程   get   提交   

原文地址:http://www.cnblogs.com/hongsen3/p/6060374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!