AJAX异步加载
AJAX含义: 即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX可以跨语言传递数据,所需文件类型是一般处理程序(数据接口):ashx
数据交换格式:
xml:
结构不清晰
代码量比较大
查找起来比较费事
非面向对象结构
json:
结构清晰
代码量相对较小
面向对象的处理解析方式,查找数据很简单
json的格式:
键值对
{"key1":"value","key2":"value"}
多个对象的json
[{"key1":"value","key2":"value"},{"key1":"value","key2":"value"},{"key1":"value","key2":"value"}]
AJAX使用
JS部分的固定格式:(需引用jquery)
$.ajax({
url: "ajax/bbb.ashx", //要将此次请求提交到哪个服务端去
data: { "zhangke": c }, //给服务端带的数据,可以没有,也可以多个
type: "post", //传递的方式
dataType: "json", //数据传递的格式
success: function (aaa) {
document.getElementById("Label1").innerHTML = aaa.lmz;
if (aaa.xc == "true") {
document.getElementById("Label1").style.color = "green";
}
else {
document.getElementById("Label1").style.color = "red";
}
}
});
后台:
public void ProcessRequest (HttpContext context) { string s = context.Request["zhangke"]; string end = "{\"lmz\":\"恭喜!用户名可用!\",\"xc\":\"true\"}"; if (s == "zhangsan" || s == "lisi")
{
end = "{\"lmz\":\"用户名已被占用!\",\"xc\":\"false\"}";
} context.Response.Write(end);
context.Response.End(); }
注意:json的格式一定不能错,中间的许多双引号需要转义符,如果容易弄错,个人方法是可以先用个其他符号代替,比如单引号,然后对字符串进行操作把里面的所有单引号替换为双引号
AJAX扩展:(加载多行数据)
关键部分是后台中需要给JS传递过去多个json对象,以及JS中如何把多个对象的数据加载到表格中
首先,写好查询方法,查询出需要的数据,返回一个泛型集合,然后用循环拼接出json,特别要注意逗号的拼接
string json = "["; List<Users> ulist = new UsersData().Select(c, n); int count = 0;
foreach (Users u in ulist)
{
if (count > 0)
{
json += ",";
} json += "{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + (u.Sex ? "男" : "女") + "\",\"birthday\":\"" + u.Birthday.ToString("yyyy年MM月dd日") + "\",\"nation\":\"" + u.Nation + "\",\"class\":\"" + u.Class + "\",\"age\":\"" + u.Age + "\"}";
count++;
} json += "]"; context.Response.Write(json);
context.Response.End();

$.ajax({
url: "ajax/Load.ashx",
data: { "count": count, "number": number },
type: "post",
dataType: "json",
success: function (data) {
document.getElementById("tbody").innerHTML = "";
for (i in data) {
var end = "<tr>";
end += "<td>" + data[i].username + "</td>";
end += "<td>" + data[i].password + "</td>";
end += "<td>" + data[i].nickname + "</td>";
end += "<td>" + data[i].sex + "</td>";
end += "<td>" + data[i].age + "</td>";
end += "<td>" + data[i].birthday + "</td>";
end += "<td>" + data[i].nation + "</td>";
end += "<td>" + data[i].class + "</td>";
end += "</tr>"; document.getElementById("tbody").innerHTML += end;
}
document.getElementById("sp-number").innerHTML = number;
}
});
AJAX异步加载的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- 使用Ajax异步加载页面时,怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- ajax异步加载回跳定位
1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...
- ajax 异步加载显示等待效果
css: #loading { width:170px; height:25px; border:3px solid #C3DAF9; position:absolute; top:300px; le ...
- ajax异步加载遮罩层特效
<!doctype html> <html> <head> <title>遮罩层(正在加载中)</title> <meta chars ...
随机推荐
- IDL 实现PCA算法
在多元统计分析中,主成分分析(Principal components analysis,PCA)是一种分析.简化数据集的技术.主成分分析经常用于减少数据集的维数,同时保持数据集中的对方差贡献最大的特 ...
- “找回” Envi 快捷方式
Envi+IDL文件夹挪到别的电脑,不用安装,直接可以使用.但是桌面和开始菜单没有了Envi,IDL,envi+idl的快捷方式,很不方便. 记录一下快捷方式命令行,备用: envi快捷方式 ...
- 优化viewHolder
- codeforces div2 677 D
http://codeforces.com/problemset/problem/677/D 题目大意: 给你一个n*m的图,上面有p种钥匙(p<=n*m),每种钥匙至少有一个,期初所有为1的钥 ...
- 【转载】区间DP
http://www.cnblogs.com/zsboy/archive/2013/03/08/2950261.html 博客园 首页 新随笔 联系 订阅 管理 定义区间DP 区间动态规划问题一般 ...
- Android MediaScanner 详尽分析
[Innost]: http://blog.csdn.net/Innost/article/details/6083467 ====================================== ...
- filters
http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/admin_hbase_filtering.h ...
- <a href="#" onclick="history.back();"></a>这样写为什么是对的? -(转)
为什么不用这样写?<a href="#" onclick="javascript:history.back();"></a> 正解是: ...
- 服务器遭受 ssh 攻击
查看auth.log日志,差点吓一跳,好多攻击记录. vim /var/log/auth.log 才两天的功夫,900多万条记录, 一些解决应对的办法: 43down voteaccepted It ...
- CentOS6.5 常用命令
卸载 rpm -e XXX yum -y remove XXX 查看内核版本 cat /proc/version