JQuery(三)-- AJAX的深入理解以及JQuery的使用
HTTP
HTTP
http: 超文本传输协议。特点: 简单、快速、灵活、无状态、无连接
URL: 统一资源定位符。
组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点
①ip地址在同一个网段是唯一的。如果是在公网中,整个公网的ip是唯一的。
②端口号默认是:80,可以省略不写。常见的端口号:8080---tomcat,80---Apache
③本机IP: localhost 或者 127.0.0.1
常见的状态码:
1XX:信息状态码
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
2XX:成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
3XX:重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
4XX:客户端错误
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
JSON对象和JS字符串
1.JSON对象: JSON对象就是键值对的集合,键与值之间用冒号分隔,多对键值对之间用逗号分隔。
注意:JSON对象,要求键必须是双引号包裹的字符串。用单引号无效。
2.JSON字符串:将JSON对象,用字符串的形式进行包裹。
3.JSON对象与JSON字符串的互相转换。
①对象 --> 字符串:JSON.stringify();
②字符串 --> 对象:JSON.parse();
JQuery也提供了字符串转对象的方法:$.parseJSON();
1 var jsonObj = {
2 "name" : "zhangsan",
3 "age" : "12",
4 "sex" : "男"
5 };
6
7 //JSON字符串
8 var jsonObj1 = '{"name" : "zhangsan","age" : "12","sex" : "男"}';
9
10 var jsonObj2 = "{\"name\" : \"zhangsan\",\"age\" : \"12\",\"sex\" : \"男\"}";
11
12 //JS中将JSON字符串转化成JSON对象
13 console.log(JSON.parse(jsonObj1));
14
15 //JS中将JSON对象转化成JSON字符串
16 console.log(JSON.stringify(jsonObj));
17
18 //JQuery中将JSON字符串转化成JSON对象
19 console.log($.parseJSON(jsonObj2));
4.JSON数组:将多个JSON对象组成数组的形式存放,称为JSON数组。
JSON数组可以和JSON对象相互嵌套,也就是说JSON对象的值可以是JSON数组。
1 var jsonArr = [
2 {
3 "name":"zhangsan",
4 "hobby":[{"0":"0"},{"1":"1"}]
5 },
6 {
7 "name":"zhangsan",
8 "hobby":[{"0":"0"},{"1":"1"}]
9 },
10 {
11 "name":"zhangsan",
12 "hobby":[{"0":"0"},{"1":"1"}]
13 }
14 ];
AJAX
AJAX:Asynchronous Javascript And XML(异步的Javascript和XML)。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
Ajax应用场景:
场景1 数据验证
场景2 按需取数据
场景3 自动更新页面
JQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层就是$.getScript()和$.getJSON()方法。
1、load()方法:载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:load(url[,data][,callback]);
参数名称 | 类型 | 说明 |
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据,JSON字符串 |
callback(可选) | Function | 请求完成时的回调函数,无论请求成功还是失败,加载完成后会执行函数 |
type:表示ajax请求的方法,可以是get和post。
url:表示请求的后台URL地址。
success:表示请求成功的回调函数。回调函数接收三个参数:参数1--请求成功接受的数据。
error:当请求失败时,执行的回调函数。
complete:请求完成后,无论成功还是失败都会执行的函数。
statusCode:接收一个对象,对象的键是各种状态码,对象的值表示每种状态码对应的回调函数。
async:设为true为异步,false为同步。默认是true
data:请求时,向后台传递的数据,是一个对象类型,以键值对的形式分别表示name:value
dataType:预期返回的数据类型格式。常见的有JSON/text/html
timeout:设置请求超时时间。
注意:使用数据时,需要注意返回的数据是JSON字符串还是JSON对象。
方法 | 作用 |
url | 请求的地址 |
type | 请求的方式 |
dataType | 告诉jQuery,需要按照什么格式对服务器返回的数据进行解析,默认json。 |
async | 设为true表示异步请求,设为false表示同步请求。默认为true |
data | 往后台传递的数据 |
success | 请求成功的回调函数,返回data数据 |
error | 请求失败的回调函数 |
beforeSend | 请求发送之前调用的函数 |
complete | 不论请求是成功还是失败的,只要请求完成就会调用 |
statusCode | 接收一个对象,对象的键是各种状态码,对象的值表示每种状态码对应的回调函数。 |
timeout | 设置请求超时时间 |
1 $.ajax({
2 type:"get",
3 url:"java1801.json",
4 async:true,
5 dataType:"json",
6 data:{"name":"张三","age":12},
7 success:function(data,textStatus,jqXRM){
8 console.log(data);
9 console.log(textStatus);
10 console.log(jqXRM);
11 console.log(jqXRM.responseText);
12 console.log(jqXRM.responseJSON);
13 },
14 error:function(XMLHttpRequest, textStatus, thrownError){
15 console.log(XMLHttpRequest);
16 console.log(textStatus);
17 console.log(thrownError);
18 },
19 complete:function(XMLHttpRequest, textStatus){
20 console.log(XMLHttpRequest);
21 console.log(textStatus);
22 },
23 statusCode:{
24 200:function(){
25 console.log("请求成功");
26 },
27 404:function(){
28 console.log("请求失败");
29 }
30 },
31 timeout:200
32 });
[JS中的同源策略]
在JS中,当请求其他文件时,要求被请求文件与当前文件必须处于同一主机名,同一个协议名,同一个端口号下,否则请求将不能成功,如果要请求非同源文件,必须进行跨域请求设置。
3.如果需要向服务器传递参数的话,可以使用$.get()方法和$.post()方法还有后面的$.ajax方法。
$.get()/$.post():在$.ajax()的基础上,进行封装,默认使用get请求。
接收4个参数:
(1)请求的后台Url
(2)传递给后台的数据,对象类型,相当于ajax中的data属性。
(3)请求成功的回调函数,相当于ajax中的success
(4)预期返回的数据类型,相当与ajax中的dataType
$.get()方法/$.post()方法
参数名称 | 类型 | 说明 |
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据,会作为字符串凭接在url的后面 |
callback(可选) | Function | 请求完成时的回调函数(只有当Response的返回状态是success的时候,才调用该函数) |
type (可选) | String | 服务器返回内容的格式,包括xml、html、script、json、text、_default |
1 $.get(
2 "java1801.json", {
3 "name": "zhangsan"
4 },
5 function(data) {
6 console.log(data);
7 },
8 "json"
9 );
4.$.getJSON():通过Get的方式,请求JSON数据。
5.serialize()方法会将表单中所有的内容拼接成key=value&key=value这样的字符串。
$("#form input[type='button']:eq(0)").on("click",function(){
var str = $("form:eq(0)").serialize();
console.log(str);
});
6.serializeArray()方法会将表单中所有的内容拼接成字符数组。
1 $("#form input[type='button']:eq(1)").on("click",function(){
2
3 var arr = $("form:eq(0)").serializeArray();
4
5 var obj = {};
6 $.each(arr, function(index,item) {
7 var keys = item.name;
8 var value = item.value;
9 obj[keys] = item.value;
10 });
11
12 console.log(JSON.stringify(obj));
13 });
使用JQuery插件
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6
7 <style type="text/css">
8 .error{ 9 color: red;
10 }
11 </style>
12
13 <script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
14 <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
15 <script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
16
17 <script type="text/javascript">
18 $(function(){
19
20 $("form:eq(0)").validate({
21 debug:true,//至验证不提交表单
22 rules:{//规则
23 username:{
24 required:true,
25 maxlength:16,
26 minlength:6
27 }
28 },
29 messages:{//提示信息
30 username:{
31 required:"必须输入",
32 maxlength:"长度不能大于16",
33 minlength:"长度不能小于16"
34 }
35 },
36 });
37
38 })
39 </script>
40
41 </head>
42 <body>
43
44 <form id="form">
45
46 用户名:<input type="text" name="username" /><br />
47 密 码:<input type="password" name="pwd" /><br />
48 确认密码:<input type="password" name="rpwd" /><br />
49 邮 箱:<input type="text" name="email" /><br />
50
51 <input type="submit" value="提交"/>
52 </form>
53
54 </body>
55 </html>
更多专业前端知识,请上 【猿2048】www.mk2048.com
JQuery(三)-- AJAX的深入理解以及JQuery的使用相关推荐
- 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...
基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...
- jquery on() ajax 首次没反应,为什么JQuery的ajax方法没有执行
用户提问 我的页面的代码如下,jquery-1.4.2.min.js导入没有问题,本来这个文件和jquery-1.4.2.min.js是放在webroot目录下的,可以正常运行. 但是我把这两个文件一 ...
- ie11 ajax 加载提示,解决在IE11浏览器下,JQuery的AJAX方法不响应问题
在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...
- JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
- 用ajax修改成功怎么返回页面,jquery操作ajax返回的页面元素
这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...
- $.ajax的async参数,jquery的$.ajax async使用详解
async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦. async默认是tr ...
- php ajax jquery 表单重复提交,jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不 ...
- jquery中ajax加载js和json文件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax加载js文件 jquery中ajax加载js文件的函数为getScript() 代码如下: $.getS ...
- jQuery中ajax的使用(最详细)
jQuery中ajax的使用 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 1.jQue ...
最新文章
- php的优化模块,php memcache模块优化配置详解
- 【公共类库】加密解密
- 2013.7.15DAY2
- .Net Core微服务系列--开篇
- vim 快捷键_VIM学习笔记 环绕字符编辑(surround)
- 2台电脑共享一套键鼠方法
- 同花顺程序交易接口type-c为什么没普及?
- php下载excel乱码,如何解决php下载excel乱码的问题
- java+nanomsg(jnanomsg)
- html怎么填充单元格颜色,PPT表格单元格怎么填充颜色 PPT填充表格单元格颜色的详细教程...
- matlab中二阶偏导数,matlab中二元函数的一阶和二阶偏导数
- 脂肪肝青睐“三围”人士 不吃早餐容易诱发
- 你还在为高速停车收费而烦恼吗?现已步入高速行ETC智慧交通时代
- 浙江万里学院计算机期末考,期末复习看这一篇推送就够了
- 二分类资料校准曲线calibration curve的绘制
- JS跨域设置和取Cookie(二)
- html+css+js 实现图片轮播效果
- 数据结构 -- 栈的基本操作(入栈、出栈、取栈顶元素)
- 让我摘下星星送给你_抖音摘下星星给你什么歌 抖音想摘下星星给你背景音乐歌曲名...
- android 怎么封装方法,开发那点事(九)安卓开发,封装常用方法,工作用