ajax入门基础
一、简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
二、基本结构
1、新建Linq(数据库信息封装绑定)
2、组键json对象(数据库数据加载到后台)
对象格式:"{"key":"value","key":"value"}"
数组格式:"[{"key":"value"},{},{}]"
例:
using System;
using System.Web;
using System.Text;
using System.Linq;
using System.Collections.Generic; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) {
StringBuilder str = new StringBuilder();
str.Append("["); //string s = context.Request["id"];
int count = ;
using (StudentDataContext con = new StudentDataContext())
{
List<Users> ulist = new List<Users>(); ulist = con.Users.ToList();
foreach (Users us in ulist)
{
count++;
if (count < ulist.Count)
{
str.Append("{\"ids\":\"" + us.Ids + "\",\"username\":\"" + us.Username + "\",\"password\":\"" + us.Password + "\",\"nickname\":\"" + us.Nikename + "\",\"sex\":\"" + us.Sex + "\",\"birthday\":\"" + us.Birthday + "\",\"nation\":\"" + us.Nation + "\",\"num\":\"" + us.Ids + "\"},"); }
else
{
str.Append("{\"ids\":\"" + us.Ids + "\",\"username\":\"" + us.Username + "\",\"password\":\"" + us.Password + "\",\"nickname\":\"" + us.Nikename + "\",\"sex\":\"" + us.Sex + "\",\"birthday\":\"" + us.Birthday + "\",\"nation\":\"" + us.Nation + "\",\"num\":\"" + us.Ids + "\"}");
}
} }
str.Append("]");
context.Response.Write(str);
context.Response.End();
} public bool IsReusable {
get {
return false;
}
} }
Josn
3、js页面数据展示(后台与前台的数据交互)
table id="tb1" style=" text-align: center; width: 100%;">
<thead>
<tr style="color: #ff6a00;">
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>生日</td>
<td>年龄</td>
<td>民族</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="加载" id="btn1" />
复制代码
复制代码
页面布局
<script>
//点击加载按钮
$("#btn1").click(function () {
//编写ajax语句,将数据提交到某个服务端去
$.ajax({
url: "ajax/userajax.ashx",//将数据要提交到哪个服务端
data: {},//将什么数据提交到服务端去,{}内基本格式为"key":"要传的数据"
type: "post",//用什么样的方式将数据提交过去
dataType: "json",//返回一个什么样的数据类型
//请求完成
success: function (data) {
$("#tb1 tbody").empty();//清空tbody
for (i in data) {
var str = "<tr style=\"\">";
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].age + "</td>";
str += "<td>" + data[i].nation + "</td>";
str += "</tr>";
$("#tb1 tbody").append(str);
}
},//success
//请求失败
error: function () {
alert('服务器连接失败!!!');
}
});//ajax
});//btn1.click
</script>
数据绑定
三、完整结构
1、错误处理:error:function(){}
2、加载前处理:beforeSend:function(){}
3、加载完处理:complete:function(){}
编写ajax语句,将数据提交到某个服务端去
$.ajax({
url: "ajax/Login.ashx",//将数据要提交到哪个服务端
data: { "un": $("#txt_uname").val().trim(), "pwd": $("#txt_pwd").val() },//将什么数据提交到服务端去,{}内基本格式为"key":"要传的数据"
type: "post",//用什么样的方式将数据提交过去
dataType: "json",//返回一个什么样的数据类型
success: function (data) {//请求完成
if (data.has == '') {
$("#btn1").attr("disabled", "disabled").val('跳转中...');
window.setTimeout(function () {
window.location.href = "HtmlPage2.html";
}, );
}
else {
$("#sp1").text("用户名密码输入错误!");
$("#btn1").removeAttr("disabled").val('登录');
}
},
error: function () {//服务器连接错误
$("#sp1").text("服务器连接失败!");
$("#btn1").removeAttr("disabled").val('登录');
},
beforeSend: function () {//已向服务器发送请求,请求完成前
$("#btn1").attr("disabled", "disabled").val('登录中...');
},
complete: function () {//请求完成后,可有可无
$("#btn1").removeAttr("disabled").val('登录');
} });
复制代码
完整
练习:
省市区三级联动
ajax入门基础的更多相关文章
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 系列文章--ASP.NET之AJAX入门教程
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- AJAX入门---点滴的积累
AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- 原生AJAX入门讲解(含实例)
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
随机推荐
- python之 类对象 类方法 实例对象 实例方法 静态方法
实例对象1. 创建的时间:使用 类名()的时候,就创建一个实例对象2. 实例属性:怎样添加 只要是一个变量能够指向这个实例对象,那么这个变量.xxxx = 111就是给其添加一个实例属性 特点: 跟着 ...
- 2019年4月zstu月赛A: 我不会做
问题 A: 我不会做 时间限制: 1 Sec 内存限制: 128 MB 题目描述 众所周知,duxing201606就是plw. 然而已经9102年了,plw仍旧没有npy.plw非常难过,于是他打 ...
- django中云存储静态文件
Django自带文件存储系统存储在本地文件夹,如果我们将文件存储在云端,需要自定义文件存储系统. 自定义文件存储系统需要继承django.core.files.storage.Storage from ...
- 汇编实验1(又是作业emm)
实验任务:学会使用debug 1.使用Debug,将程序段写入内存: 机器码: b8 20 4e 05 16 14 bb 00 20 01 d8 89 c3 01 d8 b8 1a 00 bb 26 ...
- 关于使用jQuery操作dom时的一点发现
<body> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...
- find命令简单使用
find命令是Linux系统查找文件的命令,能帮助用户在使用.管理Linux的日常事务时方便的查找出用户所需要的文件,find命令基本格式是:find [路径] [选项] [操作]. 列举一下find ...
- xc笔记
2019-03-20正式开始准备 --言语理解与表达------------------------------------------------------- 分为 1.逻辑填空 2.片段阅读 ...
- sql server 与 sql server compact 互相数据导入
从SQL Server 导出数据到 Sql Compact 使用 Sql Server Compact Tool box 从SQL Server Comapct 导出数据到 Sql Server 使 ...
- typeof 子类获取父类
像这样typeof(Typ).BaseType.Name
- Azure CosmosDB (4) 在一致性(Consistency)可用性(Availability)和性能(Performance)之间的权衡
<Windows Azure Platform 系列文章目录> 我个人感觉,这个概念和分布式系统中的CAP原则是类似的: CAP原则指的是在一个分布式系统中,Consistency(一致性 ...