Ajax Step By Step1
Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。
jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。
第一.【.load()方法】
参数的使用step by step(load 有三个(URL +data+callback) + type )
(1)如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。
//HTML 展示的页面(我们可见的部分)
<input type="button" value="异步获取数据"/>
<div id="box"></div>
//jQuery
$('input').click(function()
{
$('#box').load('test.html'); // test.html 是一个url路径 此时仅仅是载入数据
});
//test.html 内容
<html>
<head>
<body>
<div>
<span>我是异步加载数据时需要的内容,我在另一个界面</span>
</div>
</body>
</head>
</html>
(2)如果是服务器文件。一般不仅需要载入数据(url),还需要向服务器提交数据,那么我们就可以使用第二个可选参数 data。。向服务器提交数据有两种方式:get 和 post。
(2.1)不传递 data,则默认 get 方式.
$('input').click(function()
{
$('#box').load('test.php?url=www.ww');
})
//get方式接受的服务器端
(2.2)传递 data 用来在服务器端做判断
$('input').click(function()
{
$('#box').load('test.php',
{
url:'www.www'
});
});
//post 方式接受的 服务器端
注:test.php 是和服务器端交互的路径,可更加自己的要求配置。
(3)Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。
回调函数 也可以传递三个可选参数:
responseText(请求返回)、
textStatus(请求状态)、
XMLHttpRequest (XMLHttpRequest 对象)。
$('input').click(function()
{ $('#box').load('test.php(和服务器交互的路径)',
{
url:'www.www'
},function(response,status,xhr)//回调函数
{
alert('返回的值为:'+response+',状态为:'+status +', 状态是:'+xhr.statusText);//用于调试查看,在页面上打印出来
});
});
总结:::总结:.load()方法有三个参数::url,data,callback
Ajax Step By Step1的更多相关文章
- Ajax Step By Step5
第五.[表单序列化] Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传 输到服务器端.如果使用 Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提 ...
- Ajax Step By Step4
第四,[$.ajax()] $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax() ...
- Ajax Step By Step3
第三[.$.getScript()和$.getJSON()] jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件: $.getJSON(),用于专门 ...
- Ajax Step By Step2
第二.[$.get()和$.post()方法] .load()方法是局部方法(有需要父$),因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指 ...
- 关于ajax技术
传统注册存在的弊端 : 当我们点击注册时,会存在以下几个问题. 首先,浏览器会销毁当前页面,如果注册失败返回的新页面所有之前 填写的数据丢失. 其次,如果网络通信较差,我们表单提交请求数据到服务端,而 ...
- 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- Promise & Deferred Objects in JavaScript Pt.2: in Practice
原文:http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt2-practical-use Intr ...
- MATLAB曲面插值及交叉验证
在离散数据的基础上补插连续函数,使得这条连续曲线通过全部给定的离散数据点.插值是离散函数逼近的重要方法,利用它可通过函数在有限个点处的取值状况,估算出函数在其他点处的近似值.曲面插值是对三维数据进行离 ...
- Python2.7.6标准库内建函数
Built-in Functions abs() divmod() input() open() staticmethod() all() enumerate() int() ord( ...
随机推荐
- 省市县三级联动(webFrom...DropdownList)
编辑页面 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...
- 如何用grunt压缩文件
grunt-cli 全局装完之后,就可以给每个项目装grunt了. 1.先把package.json和Gruntfile.js拷到项目下(PS:这两个文件是每个项目装grunt的时候必带的) 2. ...
- [转帖]FPGA开发工具汇总
原帖:http://blog.chinaaet.com/yocan/p/5100017074 ----------------------------------------------------- ...
- js 赋值 要用 toString() ; 太坑了。
js 赋值 要用 toString() ; 太坑了. js 赋值 要用 toString() ; 太坑了. js 赋值 要用 toString() ; 太坑了.
- 2016 China-Final-F题 ——(SA+二分)
其实是一个很经典的字符串问题,但是我们比赛的时候没出. 先看一下UVA11107这题,题意是,找出最长的一个字符串,在至少一半的字符串中出现过.只要把所有的字符串用不同的分隔符分开,然后SA一下,最后 ...
- MongoDB释放磁盘空间
1. 先删除旧的文档db.remove({}): 2. 从副本集中移除待清理的成员: (1) 登录副本集中的 Primary 服务器(/opt/mongo1/bin/mongo --port 2701 ...
- redis原理分析
基本全是参考http://blog.csdn.net/a600423444/article/details/8944601 redis的使用大家都很熟悉,可能除了watch 锁,pipelin ...
- Python实时获取贴吧邮箱名单并向其发送邮件
本人Python大菜鸟,今天用python写了一个脚本.主要功能是获取贴吧指定贴子评论中留下的邮箱,通过系统的crontab每一分钟自动检测新邮箱并向其发送邮件,检测机制是去查询数据库的记录,也就是不 ...
- 通过rpc访问比特币核心钱包
开发环境和工具 1. window 10 64 2. 比特核心钱包:bitcoin core 64 配置过程 1. 下载比特币核心钱包,下载链接https://bitcoin.org/en/downl ...
- 完整地mybatis + springmvc用checkbox实现批量删除
因为自己在网上找了半天,都找不到完整地代码(脑袋笨,不会变通到自己项目里),所以在这里记下了近乎完整的代码 前端代码 <span style="cursor:pointer;" ...