jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax：
在jQuery中使用ajax首先需要引入jQuery包，其引入方式可以采用網(wǎng)絡(luò)資源，也可以下載包到項(xiàng)目文件中，這里推薦下載包到文件中；市面上有多個(gè)版本的jQuery庫，這里到官網(wǎng)：https://jquery.com/download/隨意找個(gè)比較老的版本即可，后面學(xué)完node可以使用npm更方便地下載到具體的版本，這里就不做過多強(qiáng)調(diào)了；下載完后要找到文件：jquery-1.12.4.zip\jquery-1.12.4\dist - 這個(gè)位置的文件就是要引入項(xiàng)目的文件，解壓大小為 2.3 MB左右，其用法如下:
//1.腳本之前引入jQuery文件：<script src="jquery.min.js"></script>//2.$ajax()是jQuery的ajax API，最基礎(chǔ)的可以傳兩個(gè)參數(shù)，參數(shù)一為URL地址；參數(shù)二為對象；習(xí)慣傳入一個(gè)對象作為參數(shù)，URL地址可以在這個(gè)對象中設(shè)置：$.ajax('time.php', {type: 'post', //提交方式,當(dāng)為post時(shí)請求是通過請求體傳遞，當(dāng)為get時(shí)，請求是通過URL傳遞success: function(result) { //請求成功后的回調(diào)函數(shù)，里面的參數(shù)是響應(yīng)體console.log(result);};});$.ajax({url: 'time.php',type: 'get',data: {//data給服務(wù)端傳遞參數(shù)，后面跟一個(gè)對象。id: 1,name: 'kuhai',age: 18}, dataType: 'json', //當(dāng)服務(wù)端沒有設(shè)置Content-Type: application/json時(shí)，可以通過dataType:'json'設(shè)置響應(yīng)體數(shù)據(jù)的類型。//如果data接收formData二進(jìn)制數(shù)據(jù)，那么需要加依稀兩個(gè)屬性：contentType:false,processData:false,//解決二進(jìn)制數(shù)據(jù)結(jié)束success: function(result) {console.log(result);/result會根據(jù)服務(wù)端設(shè)置的header('Content-Type: application/json')做出對應(yīng)的響應(yīng)，而原生的是不會根據(jù)服務(wù)端做出對應(yīng)的響應(yīng)，jQuery特有的。}});jQuery中ajax的基本使用方法：
<script>$.ajax({url: 'time.php',type: 'get',beforeSend: function(xhr) {// 在所有發(fā)送請求的操作（open, send）之前執(zhí)行console.log('beforeSend');},success: function(res) {//只有請求成功（狀態(tài)碼為200）才會執(zhí)行這個(gè)函數(shù)console.log('success')},error: function(err) {//只有請求不正常（狀態(tài)碼不為200）才會執(zhí)行console.log('error')},complete: function(com) {// 不管是成功還是失敗都會執(zhí)行這個(gè) complete 函數(shù)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數(shù)據(jù)格式的方式請求：Request Method默認(rèn)值: GET$.getJSON('json.php', {gender: 1}, function(sex) {console.log(sex);});</script>jQuery中ajax全局事件：
jQuery中全局事件指：ajaxStart和ajaxStop事件，只要有ajax發(fā)生或結(jié)束就會執(zhí)行此事件,常用于做加載進(jìn)度條效果：（nprogress是一個(gè)做進(jìn)度條的插件，有興趣的話可以到官方文檔學(xué)習(xí)）
<script>$(document).ajaxStart(function() {// 只要有 ajax 請求發(fā)生就會執(zhí)行此函數(shù)，函數(shù)中可以設(shè)計(jì)多種邏輯代碼}).ajaxStop(function() {//注意這里為鏈?zhǔn)秸{(diào)用// 只要有 ajax 請求結(jié)束就會執(zhí)行此函數(shù)，函數(shù)中可以設(shè)計(jì)多種邏輯代碼})})</script>jQuery中不刷新頁面實(shí)現(xiàn)局部加載：
jQuery中l(wèi)oad(url,data,function(response,status,xhr))方法是使用ajax對數(shù)據(jù)加載，URL是數(shù)據(jù)接口地址，data是請求時(shí)向服務(wù)器發(fā)送的數(shù)據(jù)，function是請求完成時(shí)執(zhí)行的函數(shù)（response請求的結(jié)果，status請求狀態(tài)，XMLHttpRequest對象）；此方法只傳入頁面的URL時(shí)，如果URL字符串中有空格且后面為一個(gè)頁面元素的選擇器，則只請求選擇器這個(gè)元素，這樣就可以實(shí)現(xiàn)頁面局部刷新效果，如：
<!--index頁面：有事件load,引入jQuery庫，實(shí)現(xiàn)局部加載--><!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($) {// 點(diǎn)擊時(shí)拿到被點(diǎn)擊的a標(biāo)簽中的href屬性值，通過load方法中ajax請求數(shù)據(jù)$('.list').on('click', function() {var url = $(this).attr('href');$('#main').load(url + ' #main');//url字符串中使用空號+選擇器實(shí)現(xiàn)只加載選擇器指定的元素：'index2.html #main'return false;//阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)事件})})</script></body></html>下面是index.html中a標(biāo)簽地址指向頁面的代碼：
<!--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跨域請求：
實(shí)際中ajax中已經(jīng)支持跨域請求，只需要在服務(wù)端設(shè)置：header(‘Access-Control-Allow-Origin: *’)此配置，即可實(shí)現(xiàn)ajax跨域請求，如：
<script>$.get('http://day-03.io/test/cors.php', {}, function(res) {console.log(res);});</script>服務(wù)端代碼：
<?php$data = time();// 一行代碼允許跨域請求header('Access-Control-Allow-Origin: *');header('Content-Type: application/json');echo json_encode($data);FormData：
FormData是html5新增傳送二進(jìn)制數(shù)據(jù)（文件）的對象，其具體用法如：
//通過ajax的方式將文件域中的文件提交給服務(wù)端： var file = $('input').prop('files')[0];//獲取到input文件域中的文件var data = new FormData();//創(chuàng)建FormData對象 data.append('names',file);//append方法中次一個(gè)參數(shù)是文件域中name屬性的值，第二個(gè)值為文件域中的文件var xhr = new XMLHttpRequest();//創(chuàng)建ajax對象 xhr.open('POST',url);//以post方式連接地址為url的服務(wù)端 xhr.send(data);//將包含文件的data對象傳給服務(wù)端 xhr.onload = function(){//通過onload處理服務(wù)端返回的數(shù)據(jù)，這里還可以使用onreadystatechange事件當(dāng)this.readyState值為4時(shí)處理服務(wù)端返回的結(jié)果console.log(this.responseText);//服務(wù)端返回的數(shù)據(jù) };FormData幾個(gè)常用的方法如下：
//創(chuàng)建FormData對象： var formData = new FormData(form);//這里出入一個(gè)form表單//1.formData.append('names',datas),將name屬性值為names的input控件的值datas追加到對象中,也可以直接將要發(fā)送的數(shù)據(jù)傳入對象中，如上面對象創(chuàng)建時(shí)傳入一個(gè)form表單 formData.append('names',datas);//2.formData.get('names');獲取form表單中name屬性值為names的input中的值 formData.get('names');//3.formData.getAll('names');以數(shù)組形式獲取form表單中name屬性值為names的所有input中的值 formData.getAll('names');//4.formData.has('names');判斷form表單中是否有name屬性值為names的input中的數(shù)據(jù) formData.has('names');//5.formData.delete('names');刪除form表單中name屬性值為names的input中的數(shù)據(jù) formData.delete('names');fileupload和uploadify插件:
除formData可以上傳二進(jìn)制數(shù)據(jù)外，這里推薦使用兩款插件fileupload和uploadify（兼容IE低版本，支持flash）也是可以上傳二進(jìn)制數(shù)據(jù)的，如果想要了解更多，建議閱讀相關(guān)文檔：https://www.jq22.com/jquery-info103、https://www.jq22.com/jquery-info230
異步獲取form表單內(nèi)容：
當(dāng)開發(fā)登錄頁面的時(shí)候，一般會把登錄頁做成異步請求數(shù)據(jù)的形式，此時(shí)需要先獲取到form表單中的內(nèi)容，獲取表單內(nèi)容的方式可以是通過DOM的形式，但是當(dāng)頁面數(shù)據(jù)足夠多的時(shí)候，此時(shí)以DOM的方式獲取form的內(nèi)容就會很繁瑣；jQuery中提供了一個(gè)表單序列化的API：serialize()，它可以獲取form表單中有name屬性的控件的值，利用此方法就可以將form中的內(nèi)容拿到，之后通過ajax的方式去服務(wù)端進(jìn)行校驗(yàn)，如：
<body><form action="" id="formadmin"><input type="text" name='username'><input type="password" name='password' class='pw'></form><script>$(function() {// 當(dāng)密碼框失去焦點(diǎn)時(shí)獲取form數(shù)據(jù)，之后通過ajax的方式提交給服務(wù)端：$('.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中的數(shù)據(jù)提交給服務(wù)端：$.ajax({url: 'test.php',type: 'post',data: dataObj,dataType: 'json',success: function(result) {console.log(result);}});console.log(dataObj);});});//需要注意：json對象，IE8以下是不支持的，若要兼容IE8以下，那么就的使用一個(gè)插件：json2.js或json3.js</script> </body>Validator：
Validator是一款做校驗(yàn)的常用插件，其使用方法可以閱讀官方文檔：https://www.jq22.com/jquery-info743
提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript中实例对象和构造函数
- 下一篇： flutter怎么添加ios网络权限_使