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 = ;
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 基本结构 数据加载的更多相关文章
- Echarts通过Ajax实现动态数据加载
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- jQuery+Ajax滚屏异步加载数据实现（附源码）
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
- echarts ajax数据加载方法
一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...
- 浅谈Entity Framework中的数据加载方式
如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...
- 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）
实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- MPP 二、Greenplum数据加载
Loading external data into greenplum database table using different ways... Greenplum 有常规的COPY加载方法,有 ...
- RE：通过移动端滑动手势实现数据加载
背景: 基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...
随机推荐
- Educational Codeforces Round 62 (Rated for Div. 2) C 贪心 + 优先队列 + 反向处理
https://codeforces.com/contest/1140/problem/C 题意 每首歌有\(t_i\)和\(b_i\)两个值,最多挑选m首歌,使得sum(\(t_i\))*min(\ ...
- EF6 学习笔记（三）：排序、过滤查询及分页
EF6 学习笔记索引目录页: ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上篇:EF6 学习笔记(二):操练 CRUD 增删改查 本篇原文地址:Sorting, Filterin ...
- Navicat for MYSQL 数据库手动同步方法
Navicat for MYSQL 数据库手动同步方法 数据库同步有两种类型,一是结构同步,一般是数据库表增删,或是表中字段的增删:二是数据同步,即是表里面的记录的增删. 现假设我要让本地数据 ...
- 说说xgboost算法
xgboost算法最近真是越来越火,趁着这个浪头,我们在最近一次的精准营销活动中,也使用了xgboost算法对某产品签约行为进行预测和营销,取得了不错的效果.说到xgboost,不得不说它的两大优势, ...
- MySQL--事务隔离级别RR和RC的异同
在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...
- 背水一战 Windows 10 (65) - 控件（WebView）: 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容
[源码下载] 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 作 ...
- 快速部署Apache服务静态网站
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充, ...
- C语言小程序——推箱子（窄字符和宽字符）
C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...
- AndroidStudio项目制作倒计时模块
前言 大家好,给大家带来AndroidStudio项目制作倒计时模块的概述,希望你们喜欢 项目难度 AndroidStudio项目制作倒计时模块的难度,不是很大,就是主要用了Timer和TimerTa ...
- 自动化测试之数据库操作pymysql
1.下载并导入pymysql 2.配置参数连接mysql db = pymysql.connect(**config) config = { 'host': str(host), 主机地址 'user ...