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对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript中实例对象和构造函数
- 下一篇： flutter怎么添加ios网络权限_使