AJAX 基本结构 数据加载

Posted 酒不醉心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX 基本结构 数据加载相关的知识,希望对你有一定的参考价值。

AJAX

         -- 网页数据异步加载

  .ashx

           一般处理程序

  json

         数据格式,在不同的语言之间传递数据

对象格式:     "{"key":"value","key":"value"}"

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

             -- 都是字符串格式

例1、对象格式

技术分享
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Linq;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string end = "{\"has\":\"false\"}";
        
        string s = context.Request["uname"];  //接受网页传进来的数据
        
        using (DataClassesDataContext con = new DataClassesDataContext())
        {
            Users u = con.Users.Where(r => r.UserName == s).FirstOrDefault();
            
            if (u != null)
            {
                end = "{\"has\":\"true\"}";
            }
        }

        context.Response.Write(end); //将结果写出去
        
        context.Response.End();   //调用 end ,不在写别的东西


    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}
Handler.ashx

    -- 所有内置对象都需要通过 context 点出来 

 

例2、数组格式

技术分享
<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;  //拼接文本

public class Handler2 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        StringBuilder str = new StringBuilder();  //拼接文本对象

        str.Append("[");

        using (DataClassesDataContext con = new DataClassesDataContext())
        {
            List<Users> ulist = con.Users.ToList();
            int count = 0;
            foreach (Users u in ulist)
            {
                if (count > 0)
                {
                    str.Append(",");    //当前面已经有字符时,在每句前面加 逗号
                }

                str.Append("{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + u.Sex + "\",\"birthday\":\"" + u.Birthday + "\",\"nation\":\"" + u.Nation + "\"}");
                count++;
            }
        }

        str.Append("]");

        context.Response.Write(str);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}
Handler2.ashx

    -- StringBuilder str = new StringBuilder();

    --str.Append(字符串);

                    -- 拼接文本对象,在堆栈中不会开辟新空间,将原空间扩大

 

jqeury.ajax基本结构

 

基本结构

$.ajax({
        url: "Handler.ashx",                      -- 提交到哪个服务端
        data: { "uname": s },                   -- 提交的数据,(k:v) k 与例1对应
        type: "post",                                -- 用什么方法
        dataType: "json",                        -- 返回值的类型
        success: function ( msg ){   }     -- 回调,处理完毕返回的结果

     });

             -- 传递进去的是字符串,返回的是字符串

例3,操纵一个 json 对象

技术分享
<!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 src="js/jquery-1.7.1.min.js"></script>
</head>
<body>

    <input type="text" id="txt1" placeholder="请输入用户名" />
    <span id="txt1_msg"></span>

</body>
</html>

<script type="text/javascript">

    $("#txt1").keyup(function () {

        var s = $(this).val();    //取文本框的值

        if (s.length < 6) {

            $("#txt1_msg").text("用户名不可以小于6位!");

            return;    //当文本框的值不够6位时,不进入AJAX
        }

        $.ajax({
            url: "Handler.ashx",
            data: { "uname": s },   //提交的数据,(k:v) k 与例1对应
            type: "post",
            dataType: "json",
            success: function (msg) {
                if (msg.has == false) {
                    $("#txt1_msg").text("恭喜!用户名可用!");
                    $("#txt1_msg").css(color,green);
                }
                else {
                    $("#txt1_msg").text("用户名已被占用!");
                    $("#txt1_msg").css(color, red);
                }
            }
        });


    });
View Code

 

例4、操纵一组对象

技术分享
<!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 src="../js/jquery-1.7.1.min.js"></script>
</head>
<body>
    <input type="button" value="加载数据" id="btn1" />


    <table id="tb1" style="width: 100%; text-align: center; background-color: navy;">

        <thead>    
            <tr style="color: white;">
                <td>用户名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>生日</td>
                <td>民族</td>
            </tr>

        </thead>  
        <tbody id="tbody1">
        </tbody>



    </table>
</body>
</html>
<script type="text/javascript">

    $("#btn1").click(function () {
        $.ajax({
            url: "../Handler2.ashx",
            data: {},
            type: "post",
            dataType: "json",
            success: function (msg) {   //返回的是一个集合

                $("#tbody1").html("");  //清除,内容变空

                for (var i = 0; i < msg.length; i++)
                {
                    var str = "  <tr style=\"background-color: white;\">"
                    str += " <td>" + msg[i].username + "</td>";
                    str += "<td>" + msg[i].password + "</td>";
                    str += " <td>" + msg[i].nickname + "</td>";
                    str += " <td>" + msg[i].sex + "</td>";
                    str += " <td>" + msg[i].birthday + "</td>";
                    str += " <td>" + msg[i].nation + "</td>";
                    str += "</tr>";
                    $("#tbody1").append(str);  //末尾追加
                }

            },
            error: function () {   //错误,如果找不到服务端,执行此方法
                alert(err);
            }
        });

    });



</script>
View Code

--表格中

<thead> </thead>     --表 标题

<tbody ></tbody>    -- 表 内容

 






以上是关于AJAX 基本结构 数据加载的主要内容,如果未能解决你的问题,请参考以下文章

执行AJAX返回HTML片段中的JavaScript脚本

html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用

Javascript代码片段在drupal中不起作用

14.VisualVM使用详解15.VisualVM堆查看器使用的内存不足19.class文件--文件结构--魔数20.文件结构--常量池21.文件结构访问标志(2个字节)22.类加载机制概(代码片段

jQuery高级Ajax

Ajax数据爬取基本原理