當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax异步交互与跨域访问（三）JQuery中的Ajax

發布時間：2024/5/14 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax异步交互与跨域访问（三）JQuery中的Ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery中的Ajax

一、jQuery提供的六個Ajax操作方法

1、load()方法

$element.load(url,[data],[callback])

參數：
- url:異步請求的HTML 頁面的url地址。
- data: 發送給服務器端的key/value形式的數據內容。
  - 如果省略請求數據的話，當前的請求方式為GET
  - 如果發送請求數據的話，當前的請求方式為POST
- callback: Ajax請求完成時的回調函數。
返回值：
- 服務器端的響應結果
注意：自動返回結果寫入到元素中

2、 $. g e t () 與$ .post()方法

$.get()

請求方式為GET

$.get(url,[data],[callback],[type])

參數：

url:請求HTML頁面的url地址。
data:發送給服務器端的key/value形式的數據內容。
callback: Ajax請求完成時的回調函數。
type:設置返回數據內容的格式。值為xml、html、 script、 JSON、 text和_default。

$.post()

跟get一樣

3、$.ajax()方法

$.ajax(url,[settings])

參數：

url - 請求地址
settings -設置異步請求的參數

settings選項對象類型:

type -設置請求方式
data- 發送給服務器端的請求數據
dataType -服務器端響應結果的格式
success -異步請求成功后的回調函數
- function(data, textStatus, jqXHR){}
  - data-表示服務器端響應的結果
  - textStatus -表示服務器端當前的狀態
  - jqXHR - Ajax中的核心對象

$.ajax('url',{type:'',dataType:'',success:function(){} })

4、$.getScript()方法

是jQuery中動態加載js文件的方法

$.getScript(url,[callback])

5、$.getJSON()方法

請求方式始終是：GET

三級聯動案例

ssk.json

[{"name":"javascript","value": ["java","javascript"]},{"name": "jquery","value": ["jquery","鋒利的JQuery"]} ] <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>搜索框</title><style>.container #search {width: 500px;}.container .alert {width: 500px;border: 1px solid lightgray;display: none;}.container .alert ul {list-style: none;margin: 0;padding: 0;}</style> </head> <body> <div class="container"> <input type="text" id="search"> <div class="alert"><ul><li>前端開發</li><li>前端課程</li><li>Web課程</li></ul></div> </div> <script src="js/jquery-1.10.1.js"></script> <script >// 捕獲用戶輸入行為：/** 1、綁定鍵盤事件 keydown keyup keypress* 2、鍵盤輸入事件 input**/$('#search').bind('keydown',function () {$('.alert>ul').empty()// 根據輸入的內容動態的獲取相關提示數據var inputValue = $(this).val()$.getJSON('data/ssk.json',function (data) {// 遍歷json$.each(data,function (index,obj) {var name = obj.nameif(name.indexOf(inputValue) >= 0){var value = obj.value$.each(value,function (index,text) {$('.alert>ul').append($('<li>'+text+'</li>'))})}})})// 將提示框隱藏狀態切換到顯示狀態$('.alert').css('display','block')}).bind('blur',function () {$('.alert').css('display','none')}) </script> </body> </html>

二、異步提交表單

通過Ajax異步交互方式提交表單

步驟如下：

獲取表單及所有表單組件對應的數據值。
將所有表單組件對應的數據值拼成特定格式的字符串或是JSON格式數據。
通過Ajax異步交互方式提交表單。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title> </head> <body> <script src="js/jquery-1.10.1.js"></script><form action=""><input type="text" id="name"><input type="submit"> </form><script >$('form').bind('submit',function (event) {event.preventDefault()// 獲取表單組件內容var name = $('#name').val()// 構建發送給服務器端的數據格式var data = 'name=' + name// 通過異步交互提交表單$.post('data/server.js',data,function (res) {console.log(res)})}) </script> </body> </html>

三、表單序列化

serialize(方法: 將表單組件對應的數據值序列化為指定格式的字符串內容。
$('form").serialize()

serializeArray(方法: 將表單組件對應的數據值序列化為、JSON格式的數據內容。
香
$('select, :radio').serializeArray()

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表單序列化</title> </head> <body> <script src="js/jquery-1.10.1.js"></script><form action=""><input type="text" name="username" id="name"><input type="text" name="password" id="pwd"><input type="submit"> </form><script >$('form').bind('submit',function (event) {event.preventDefault()// 表單序列化、// var data = $('form').serialize()var data = $('form').serializeArray()console.log(data)// 通過異步交互提交表單$.post('data/server.js',data,function (res) {console.log(res)})}) </script> </body> </html>

總結

以上是生活随笔為你收集整理的Ajax异步交互与跨域访问（三）JQuery中的Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery
Ajax

上一篇： vue-router重定向redirec
下一篇：影像畸变矫正带扭曲参数s(skew)像素