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 = ;

            foreach (Users u in ulist)

            {

                if (count > )

                {

                    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 },                   -- 提交的数据，以键值对的方式传字符串，只能是字符串，可以传多个。

type: "post",                                -- 用什么方法

  dataType: "json",                        -- 返回值的类型

async:true,    （默认可不写）           -- 异步执行 （async: false  关闭异步功能）

success: function ( msg ){

                  回调，处理完毕返回的结果 

         },      

error:function(  ){

                  出错（ 路径错，服务端错，没有返回规定的json格式数据）

          },

beforeSend:function(  ){

                     发送之前执行（防止重复请求）

         }, 

complete:function(  ){  

                          加载完后执行

          }

 });

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

例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 < ) {

            $("#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');

                }

            }

        });

    });

--与例1 对应

例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 = ; 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>

-- 与例2 对应

--表格中

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

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

jQuery对象与DOM对象的相互转换

jQuery对象转成DOM对象： 

两种转换方式

1、通过[index]的方法

var $v =$("#v") ;      -- jQuery对象

var v=$v[0];              --DOM对象

2、通过.get(index)方法

var $v=$("#v");             --jQuery对象

 var v=$v.get(0);              --DOM对象

DOM对象转成jQuery对象:

用$()把DOM对象包装起来

var v=document.getElementById("v");     -- DOM对象

var $v=$(v);                                               -- jQuery对象

AJAX 基本结构 数据加载的更多相关文章

  1. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

  2. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. jQuery+Ajax滚屏异步加载数据实现（附源码）

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

  4. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  5. 浅谈Entity Framework中的数据加载方式

    如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...

  6. 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）

    实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...

  7. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  8. MPP 二、Greenplum数据加载

    Loading external data into greenplum database table using different ways... Greenplum 有常规的COPY加载方法,有 ...

  9. RE：通过移动端滑动手势实现数据加载

      背景:         基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...

随机推荐

  1. RxSwift学习笔记9：amb/tabkeWhile/tabkeUntil/skipWhile/skipUntil

    //amb基本介绍 //当传入多个 Observables 到 amb 操作符时,它将取第一个发出元素或产生事件的 Observable,然后只发出它的元素. //并忽略掉其他的 Observable ...

  2. MySQL 基础--时间戳类型

    时间戳数据存储 .TimeStamp的取值范围为'1970-01-01 00:00:01' UTC 至'2038-01-19 03:14:07' UTC: .在存储时间戳数据时先将数据转换为UTC时区 ...

  3. EF生成实体自动添加数据库字段注释

    我们在用EF从数据库生成模型的时候,默认实体类是没有注释的,但是我们已经在数据库字段添加说明了,能不能自动把注释也拿过来? 答案是:能. 那么我们开始 首先随便开一个ASP.NET   MVC项目,我 ...

  4. 《JavaScript面向对象编程指南》读书笔记①

    概述 JavaScript快忘完了,想看一本专业书拾遗,所以看了这本<JavaScript面向对象编程指南>. 个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看 ...

  5. 一个简单的C语言题背后的故事

    最近看到了一个C语言问题,是要计算出这个函数的输出: #include <stdio.h> int Test(int x,int y, int z){ printf("x,y,z ...

  6. redis lru实现策略

    转载自http://blog.chinaunix.net/uid-20708886-id-5753422.html 在使用redis作为缓存的场景下,内存淘汰策略决定的redis的内存使用效率.在大部 ...

  7. 【sping揭秘】15、afterreturning

    @afterreturning 我们同理写几个测试类 package cn.cutter.start.bean; import org.apache.commons.logging.Log; impo ...

  8. HDU 6022---MG loves set（K-D树）

    题目链接 Problem Description MG is an intelligent boy. One day he was challenged by the famous master ca ...

  9. (转)内核模块操作命令-lsmod+rmmod+modinfo+modprobe

    原文:http://watchmen.xin/2018/07/13/IT%E7%A7%91%E5%AD%A6%E6%8A%80%E6%9C%AF%E7%9F%A5%E8%AF%86%E4%BD%93% ...

  10. mysql 开发进阶篇系列 28 数据库二进制包安装(centos系统准备)

    1. centos 7安装工作 对于mysql二进制安装,我这里在使用一台新的centos系统.准备好VMware,Xftp-6.0, Xshell-6.0.在VMware中网络使用桥接模式,分配20 ...