jQuery實現Ajax

時間 2019-12-08

標籤 jquery 實現 ajax 欄目 JQuery 简体版

原文原文鏈接

原由

現在的Web形式是後端僅僅提供api接口,那麼系統的前端如何獲得後端傳來的這些數據呢?而後系統前端所填的信息又是如何傳遞給後端呢?javascript
我想最易理解的方案那就是經過ajax進行先後端的數據交互,嘻嘻嘻嘻,直接用jQuery庫封裝好的ajax方法,能夠說是一種快速生產的方式.php
ajax都是異步請求的,因此接下去所記錄的方法也都是異步進行的.html

ajax方法

`load(url,[data],[callback])` 異步請求載入遠程HTML片斷並插入至DOM中

這些HTML片斷能夠沒有<html>、<head>、<body>,只包含最基本的代碼前端

$('#abc').load('abc.html');

也能夠加載HTML片斷中某個須要的匹配部分html5

$('#abc').load('html5/abc.html #abc');

`$.getJSON(url,[data],[callback])` 使用一個HTTP GET請求從服務器加載JSON編碼的數據

getJSON()是全局jQuery對象的方法,也就是全局函數.
經過url獲取JSON數據格式,而後使用回調函數將獲取的數據進行後續操做.java

$.getJSON('abc.json',function(data){
    console.log(data);
});

`$.getScript(url,[callback])` 使用一個HTTP GET請求從服務器加載並執行一個 JavaScript 文件

同getJSON方法同樣,也是全局jQuery對象的方法.
有時候初次加載頁面是有些js文件未必都是必須的,因此經過這個方法能夠用戶在操做能夠動態靈活的加載所需的js腳本.ajax

$.getScript('abc/abc.js');

`$.get(url,[data],[callback])` 使用一個HTTP GET請求從服務器加載數據

get可簡單的理解爲從服務器獲取數據進行以後一系列操做json

$.get('http://www.imooc.com/data/info_f.php',function(data){
    $('#abc').html(data);
});

`$.post(url,[callback])` 使用一個HTTP POST 請求從服務器加載數據

而post請求雖然說與get請求結構同樣但也有一些區別.
GET方式對傳輸的數據大小有限制，而POST方式傳遞的數據量要比GET方式大得多.
固然不止這一點區別下次想到再補充:後端

$.post("http://www.imooc.com/data/check_f.php",{num:$("txtNumber").val()},function(data){
    console.log(data);
});

使用post請求發送序列化表單數據:api

$.post("test.php", $("#testform").serialize(),function(data){
    alert('發送成功');
});

`$.ajax([settings])` 執行一個異步的HTTP（Ajax）的請求

ajax()是功能最強大的請求數據的方法,不只能夠請求數據,也能夠向服務器發送數據,也能夠進行跨域獲取json數據

$.ajax({
    url:'url'
    type:'post',
    async:true,
    data:data,
    dataType: 'json',
    success:function(data){}
});

`$.ajaxSetup[options]` 設置全局默認的Ajax默認選項

$.ajaxSetup({
    type:'post',
    async:true,
    dataType: 'json',
});

實際用$.ajax()時仍然能夠將默認選項值覆蓋

`ajaxStart()`和`ajaxStop()`

$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });
$(document).ajaxStop(function() {
      $( "#loading" ).hide();
});

ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成後觸發函數。

`$.ajaxError()`和`$.ajaxSuccess()`

$.ajaxError() Ajax請求出錯時註冊一個回調處理函數, 這是一個Ajax Event.
$.ajaxSuccess()綁定一個函數當 Ajax 請求成功完成時執行, 這是一個Ajax Event.

總結

關於先後端用數據Ajax實現就先到這吧.
$.ajax()此方法是最底層的方法並未展開,但的確在從此實踐生產是用得最多的.
get和post區別也是須要清楚的.
前端路漫漫任重而道遠

相關標籤/搜索

jquery+ajax+php+mysql

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery實現Ajax

原由

ajax方法

load(url,[data],[callback]) 異步請求載入遠程HTML片斷並插入至DOM中

$.getJSON(url,[data],[callback]) 使用一個HTTP GET請求從服務器加載JSON編碼的數據

$.getScript(url,[callback]) 使用一個HTTP GET請求從服務器加載並執行一個 JavaScript 文件

$.get(url,[data],[callback]) 使用一個HTTP GET請求從服務器加載數據

$.post(url,[callback]) 使用一個HTTP POST 請求從服務器加載數據

$.ajax([settings]) 執行一個異步的HTTP（Ajax）的請求

$.ajaxSetup[options] 設置全局默認的Ajax默認選項

ajaxStart()和ajaxStop()

$.ajaxError()和$.ajaxSuccess()

總結