jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

jQuery中使用ajax：

在jQuery中使用ajax首先需要引入jQuery包，其引入方式可以采用网络资源，也可以下载包到项目文件中，这里推荐下载包到文件中；市面上有多个版本的jQuery库，这里到官网：https://jquery.com/download/随意找个比较老的版本即可，后面学完node可以使用npm更方便地下载到具体的版本，这里就不做过多强调了；下载完后要找到文件：jquery-1.12.4.zip\jquery-1.12.4\dist - 这个位置的文件就是要引入项目的文件，解压大小为 2.3 MB左右，其用法如下:

 //1.脚本之前引入jQuery文件：<script src="jquery.min.js"></script>//2.$ajax()是jQuery的ajax API，最基础的可以传两个参数，参数一为URL地址；参数二为对象；习惯传入一个对象作为参数，URL地址可以在这个对象中设置：$.ajax('time.php', {type: 'post', //提交方式,当为post时请求是通过请求体传递，当为get时，请求是通过URL传递success: function(result) { //请求成功后的回调函数，里面的参数是响应体console.log(result);};});$.ajax({url: 'time.php',type: 'get',data: {//data给服务端传递参数，后面跟一个对象。id: 1,name: 'kuhai',age: 18}, dataType: 'json', //当服务端没有设置Content-Type: application/json时，可以通过dataType:'json'设置响应体数据的类型。//如果data接收formData二进制数据，那么需要加依稀两个属性：contentType:false,processData:false,//解决二进制数据结束success: function(result) {console.log(result);/result会根据服务端设置的header('Content-Type: application/json')做出对应的响应，而原生的是不会根据服务端做出对应的响应，jQuery特有的。}});

jQuery中ajax的基本使用方法：

 <script>$.ajax({url: 'time.php',type: 'get',beforeSend: function(xhr) {// 在所有发送请求的操作（open, send）之前执行console.log('beforeSend');},success: function(res) {//只有请求成功（状态码为200）才会执行这个函数console.log('success')},error: function(err) {//只有请求不正常（状态码不为200）才会执行console.log('error')},complete: function(com) {// 不管是成功还是失败都会执行这个 complete 函数console.log('complete')}});</script>

jQuery中ajax快捷操作：

 <script>// 以get的方式请求：$.get('time.php', {id: 1,name: 'ming'}, function(result) {console.log(result);});// 以post的方式请求：$.post('json.php', {age: 18}, function(res) {console.log(res);});// 以json数据格式的方式请求：Request Method默认值: GET$.getJSON('json.php', {gender: 1}, function(sex) {console.log(sex);});</script>

jQuery中ajax全局事件：

jQuery中全局事件指：ajaxStart和ajaxStop事件，只要有ajax发生或结束就会执行此事件,常用于做加载进度条效果：（nprogress是一个做进度条的插件，有兴趣的话可以到官方文档学习）

 <script>$(document).ajaxStart(function() {// 只要有 ajax 请求发生就会执行此函数，函数中可以设计多种逻辑代码}).ajaxStop(function() {//注意这里为链式调用// 只要有 ajax 请求结束就会执行此函数，函数中可以设计多种逻辑代码})})</script>

jQuery中不刷新页面实现局部加载：

jQuery中load(url,data,function(response,status,xhr))方法是使用ajax对数据加载，URL是数据接口地址，data是请求时向服务器发送的数据，function是请求完成时执行的函数（response请求的结果，status请求状态，XMLHttpRequest对象）；此方法只传入页面的URL时，如果URL字符串中有空格且后面为一个页面元素的选择器，则只请求选择器这个元素，这样就可以实现页面局部刷新效果，如：

 <!--index页面：有事件load,引入jQuery库，实现局部加载--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="jquery.min.js"></script></head><body><div><a class="list" href="index.html">页面1</a><a class="list" href="index2.html">页面2</a><a class="list" href="index3.html">页面3</a></div><main id="main"><h2>页面1</h2></main><script>$(function($) {// 点击时拿到被点击的a标签中的href属性值，通过load方法中ajax请求数据$('.list').on('click', function() {var url = $(this).attr('href');$('#main').load(url + ' #main');//url字符串中使用空号+选择器实现只加载选择器指定的元素：'index2.html #main'return false;//阻止a标签默认跳转事件})})</script></body></html>

下面是index.html中a标签地址指向页面的代码：

 <!--index2中的代码：--><main id="main"><h2>页面2</h2></main><!--index3中的代码：--><main id="main"><h2>页面3</h2></main>

jQuery中JSONP：

 <script>$.ajax({url: 'http://day-03.io/test/server.php',dataType: 'jsonp',//开启jsonp跨域请求success: function(res) {console.log(res)}})</script>

ajax跨域请求：

实际中ajax中已经支持跨域请求，只需要在服务端设置：header(‘Access-Control-Allow-Origin: *’)此配置，即可实现ajax跨域请求，如：

 <script>$.get('http://day-03.io/test/cors.php', {}, function(res) {console.log(res);});</script>

服务端代码：

 <?php$data = time();// 一行代码允许跨域请求header('Access-Control-Allow-Origin: *');header('Content-Type: application/json');echo json_encode($data);

FormData：

FormData是html5新增传送二进制数据（文件）的对象，其具体用法如：

//通过ajax的方式将文件域中的文件提交给服务端：
var file = $('input').prop('files')[0];//获取到input文件域中的文件var data = new FormData();//创建FormData对象
data.append('names',file);//append方法中次一个参数是文件域中name属性的值，第二个值为文件域中的文件var xhr = new XMLHttpRequest();//创建ajax对象
xhr.open('POST',url);//以post方式连接地址为url的服务端
xhr.send(data);//将包含文件的data对象传给服务端
xhr.onload = function(){//通过onload处理服务端返回的数据，这里还可以使用onreadystatechange事件当this.readyState值为4时处理服务端返回的结果console.log(this.responseText);//服务端返回的数据
};

FormData几个常用的方法如下：

//创建FormData对象：
var formData = new FormData(form);//这里出入一个form表单//1.formData.append('names',datas),将name属性值为names的input控件的值datas追加到对象中,也可以直接将要发送的数据传入对象中，如上面对象创建时传入一个form表单
formData.append('names',datas);//2.formData.get('names');获取form表单中name属性值为names的input中的值
formData.get('names');//3.formData.getAll('names');以数组形式获取form表单中name属性值为names的所有input中的值
formData.getAll('names');//4.formData.has('names');判断form表单中是否有name属性值为names的input中的数据
formData.has('names');//5.formData.delete('names');删除form表单中name属性值为names的input中的数据
formData.delete('names');

fileupload和uploadify插件:

除formData可以上传二进制数据外，这里推荐使用两款插件fileupload和uploadify（兼容IE低版本，支持flash）也是可以上传二进制数据的，如果想要了解更多，建议阅读相关文档：https://www.jq22.com/jquery-info103、https://www.jq22.com/jquery-info230

异步获取form表单内容：

当开发登录页面的时候，一般会把登录页做成异步请求数据的形式，此时需要先获取到form表单中的内容，获取表单内容的方式可以是通过DOM的形式，但是当页面数据足够多的时候，此时以DOM的方式获取form的内容就会很繁琐；jQuery中提供了一个表单序列化的API：serialize()，它可以获取form表单中有name属性的控件的值，利用此方法就可以将form中的内容拿到，之后通过ajax的方式去服务端进行校验，如：

<body><form action="" id="formadmin"><input type="text" name='username'><input type="password" name='password' class='pw'></form><script>$(function() {// 当密码框失去焦点时获取form数据，之后通过ajax的方式提交给服务端：$('.pw').blur(function() {var data = $('#formadmin').serialize();var arr = data.split('&');var dataObj = {};arr.forEach(function(item, i) {var datas = item.split('=');dataObj[datas[0]] = datas[1];});// 通过ajax的方式将form中的数据提交给服务端：$.ajax({url: 'test.php',type: 'post',data: dataObj,dataType: 'json',success: function(result) {console.log(result);}});console.log(dataObj);});});//需要注意：json对象，IE8以下是不支持的，若要兼容IE8以下，那么就的使用一个插件：json2.js或json3.js</script>
</body>

Validator：
Validator是一款做校验的常用插件，其使用方法可以阅读官方文档：https://www.jq22.com/jquery-info743

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）相关推荐

ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
php抓取动态数据,php+ajax实现无刷新动态加载数据技术
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...
netstrem获取302后的地址，可用来截图，加载实际跨域文件
直接放代码,老外博客看来的,老外还是牛逼,这都用出来了:http://jessewarden.com/2009/03/handling-crossdomainxml-and-302-redirects ...
AJAX请求和跨域请求详解（原生JS、Jquery）
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
jQuery实现ajax跨域请求
jQuery实现ajax跨域请求 jsonp形式 <!DOCTYPE html> <html lang="en"><head><meta ...
$.ajax跨域请求数据的解决方案
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的 ...
ajax error parsererror,完美解决ajax跨域请求下parsererror的错误
AJAX 的完美解决ajax跨域请求下parsererror的错误 ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLH ...
Ajax（跨域请求）
JSONP 跨域请求 CORS 跨域请求 proxy代理请求 1.什么是跨域首先,现代浏览器为了安全,做了一个同源限制. 也就是所谓的同源安全策略. 本质上,其实是不存在所谓的跨不跨域的. 把浏览器 ...

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）相关推荐

最新文章

热门文章