本文详细介绍了jQuery中的AJAX方法，包括.load(), $.ajax(), $.get(), $.post()等，以及如何处理数据类型、回调函数、错误处理和状态码。通过实例展示了如何与服务器进行异步交互，如何序列化表单数据以及解析JSON。同时，讲解了jQuery的事件监听，如ajaxStart, ajaxSuccess等，帮助读者深入理解jQuery AJAX的使用。
.load();
加载远程的HTML文件代码，并插入到指定的DOM节点中。
可以只传入一个参数，表示加载一个静态的HTML代码片段。
$("#div1").load("load.html");
$.ajax():是JQuery最底层的ajax函数，参数接收一个大对象。对象里面的属性和方法，表示ajax请求的相关设置：
① url : 请求远程文件的路径
② type： Ajax请求的类型，可选值 get/post
③ data: 对象格式。向后台发送一个对象，表示传递的数据。
常用与type为"post"的请求方式；
如果type为"get"，可以直接使用？追加在URL的后面。
④ dataType ：预期后台返回什么类型的数据。
"text"-字符串 "json"-JSON对象
⑤ success: 请求成功的回调函数。参数接受一个data，表示后台返回的数据。
⑥ error : 请求失败的时候的回调函数
⑦ statusCode ： 接受一个对象，对象的键值对是status状态码和对应的回调函数，表示当请求状态码是对应数字时，执行具体的操作函数。
200-正常请求成功 404-页面没有找到 500-服务器内部错误。
示例：
$.ajax({
url : "http://localhost/json.php?name='zhangsan'&age=12",
type: "post",
data : {
name : "李四",
age :
},
//dataType : "json",
success : function(data){
// JQuery中吧JSON字符串转成JSON对象
var jsons = $.parseJSON(data);
console.log(jsons);
},
error: function(){
alert("请求失败啦！");
},
statusCode:{
"":function(){
alert("404表示页面没有找到");
},
"":function(){
alert("500表示服务器内部错误");
},
"":function(){
alert("200表示请求成功");
}
}
});
$.get(); $.post(); 这两个函数，是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求；
接受四个参数：
① 请求的URL路径。 相当于$.ajax()里面的url；
② 向后台传递的数据。 相当于$.ajax()里面的data；
③ 请求成功的回调函数。 相当于$.ajax()里面的success；
④预期返回的数据类型。 相当于$.ajax()里面的dataType；
$.post("http://localhost/json.php",{data:"aaa"},function(data){
console.log(data);
},"json");
$.getJSON 以Get的方式，请求JSON对象的数据。
$.getJSON("http://localhost/json.php",{data:"aaa"},function(data){
console.log(data);
});
表单序列化
$(function(){
$("#btn1").click(function(){
/* 序列化表单数据为一个字符串 */
var str = $("#form1").serialize();
console.log(str);
//str = name=jiang&password=123&email=1234123
var arr = str.split("&");
console.log(arr);
var obj = {};
for (var i=0; i
var arr1 = arr[i].split("=");
var keys = arr1[0];
var values = arr1[1];
obj[keys] = values;
}
console.log(obj);
$.get("01-JQuery基础.html?"+str,obj,function(){
})
})
$("#btn2").click(function(){
/*序列化表单数据为一个数组*/
var arr = $("#form1").serializeArray();
console.log(arr);
var obj = {};
for (var i=0; i
var keys = arr[i].name;
var values = arr[i].value;
obj[keys] = values;
}
console.log(obj);
});
});
用户名：
密码：
邮箱：
$.parseJSON(str) 将JSON字符串转为JSON对象
标准的JSON字符串，键必须用双引号包裹。
var str = '{"age":12}'
var obj = $.parseJSON(str);
console.log(obj);
.trim() 去除掉字符串两端空格
var str1 = " 123 ";
console.log(str1.trim());
用户遍历数组和对象
遍历数组时，函数的第一个参数是下标，第二个参数是值；
遍历对象时，函数的第一个参数是键，第二个参数是值。
var arr = [1,2,3,4,5,6,7];
var obj = {
name : "zhangsan",
age : 12,
sex : "nan"
}
$.each(obj,function(index,item){
console.log(index);
console.log(item);
});
AJax的各种监听事件：
ajaxStart--->ajaxSend--->ajaxSuccess/ajaxError/ajaxComplete--->ajaxStop
$(document).ajaxSend(function(){
alert("ajax请求发送")
});
$(document).ajaxStop(function(){
alert("ajax请求停止")
})
$(document).ajaxStart(function(){
alert("ajax请求开始")
})
$(document).ajaxSuccess(function(){
alert("ajax请求成功")
})
$(document).ajaxError(function(){
alert("ajax请求失败")
})
$(document).ajaxComplete(function(){
alert("ajax请求完成(不管成功失败，都会死乞白赖出来)")
})
jQuery高级编程
jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...
【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
jquery高级编程学习
jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...
jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
随机推荐
tftp 限制ip 限制ip段 或者多个ip段访问
1 限制单个ip访问 tftp 配置tftp信息 vi /etc/xinetd.d/tftp 在 service tftp配置信息中添加 only_form =ip 重启 service xinet ...
关于discuz“终于解决“头像保存过程中发生网络错误,请重试";”的解决方法
1 php.ini里面allow_url_fopen = On2 将php.ini中的;upload_tmp_dir = 该行的注释符,即前面的分号“:”去掉,使该行在php.ini文档中起作用.up ...
#import、#include以及@class的区别
一.#import和#include的区别 当我们在代码中使用两次#include的时候会报错:因为#include相当于拷贝头文件中的声明内容,所以会报重复定义的错误 但是使用两次#import的话 ...
对boost::shared_from_this的进一步封装
对boost::shared_from_this的进一步封装 熟悉异步编程的同学可能会对boost::shared_from_this有所了解.我们在传入回调的时候,通常会想要其带上当前类对象的上下文 ...
Linux系统的命令别名功能
命令别名功能在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁地输入某个很长命令或用法是不可取的.这时可以使用命令别名功能将这个过程简单化. 1．系统 ...
【NOIP2012提高组】借教室
90分暴力解法: 用线段树,初始值为该天的教室数,每个人来申请的时候在这段区间减去借走的数,然后查询最小值是否小于0,是就输出-1,否则继续. (其实在vijos是可以直接A的,他们的评测机太快了) ...
《Web Scraping With Python》Chapter 2的学习笔记
You Don't Always Need a Hammer When Michelangelo was asked how he could sculpt a work of art as mast ...
Java中的Integer和int
Java中的Integer是引用类型,而int是基本类型.Integer是int的包装器类型. java中的基本类型有布尔类型boolean;字符类型char;整数类型byte,int,long,sh ...
深入理解指针—>;结构体里的成员数组和指针
单看这文章的标题,你可能会觉得好像没什么意思.你先别下这个结论,相信这篇文章会对你理解C语言有帮助.这篇文章产生的背景是在微博上,看到@Laruence同学出了一个关于C语言的题,微博链接.微博截图如 ...
Python入门：类与类的继承
类,是一些有共同特征和行为事物的抽象概念的总和. 1. 定义一个类: 我们使用class来定义一个类,和之前说过的定义函数用def类似.在类里面给变量赋值时,专业术语称之为类的属性. 比如拿可口可乐来 ...
扫一扫
2308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
