AJAX的使用方法

今天就跟大家聊聊有關(guān)AJAX的使用方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司公司2013年成立，先為茅箭等服務(wù)建站，茅箭等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為茅箭企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

ajax簡介：

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。（這一特點(diǎn)給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。

同步交互：客戶端發(fā)出一個(gè)請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個(gè)請求；

異步交互：客戶端發(fā)出一個(gè)請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個(gè)請求。

ajax的基本使用方法：

# 前端向后端請求方式：1 瀏覽器手動輸入網(wǎng)址（get請求），2 a標(biāo)簽的href屬性（get請求），form表單（get/post請求，默認(rèn)為get）

# ajax特點(diǎn)：異步提交、局部刷新

# 基本使用語法：

提交url （url：’...‘）

提交方式（type: 'post')

提交數(shù)據(jù) (data:{'''})

提交后通過回調(diào)函數(shù)得到的返回結(jié)果 (sucess:function(data){...})

# 基本使用示例：（ajax的默認(rèn)傳輸數(shù)據(jù)的格式是urlencoded）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圖書管理系統(tǒng)</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body>
<button class="btn btn-success" id="b1">AJAX測試</button>
<script>
    {#綁定按鈕點(diǎn)擊觸發(fā)ajax提交數(shù)據(jù)#}
    $('#b1').on('click', function () {
        $.ajax({    {#固定語法格式#}
            url: '',  {#不寫默認(rèn)朝當(dāng)前頁面發(fā)請求#}
            type: 'post',   {#請求方式#}
            data : {'name': 'sgt', 'pwd': '123'},    {#發(fā)送的請求數(shù)據(jù)#}
            {#這里的data就是回調(diào)函數(shù)success獲取到的后端響應(yīng)返回的數(shù)據(jù)#}
            success:function (data) {
                swal({
                    title: 'AJAX',
                    text: '模擬這里顯示了返回的數(shù)據(jù)',
                    icon: 'success',
                    button: 'OK',
                    })
            }
        })
    })
</script>
</body>
</html>

我們知道ajax默認(rèn)的傳輸數(shù)據(jù)格式是urlencoded，前面我們說過，ajax可以用json作為數(shù)據(jù)格式傳輸。

現(xiàn)在強(qiáng)調(diào)一點(diǎn)：前后端傳輸數(shù)據(jù)必須要求數(shù)據(jù)是什么格式就應(yīng)該用對應(yīng)的傳輸格式，一一對應(yīng)去傳輸，否則Django解析數(shù)據(jù)出問題，以至于我們在前后端拿不到想要的數(shù)據(jù)。

所以：

第一：我們需要在ajax發(fā)送請求代碼中指定發(fā)送數(shù)據(jù)格式：

contentType: 'application/json',

第二：后端獲取json格式數(shù)據(jù)不再是request.POST,而是通過request.body(得到的是一個(gè)bytes類型的json格式數(shù)據(jù)），所以再處理一下：

res = json.loads(request.body.decode('utf-8')),這就得到前端ajax發(fā)送過來的json格式數(shù)據(jù)。

看完上述內(nèi)容，你們對AJAX的使用方法有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享標(biāo)題：AJAX的使用方法
網(wǎng)頁鏈接：http://jinyejixie.com/article48/jpoeep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、搜索引擎優(yōu)化、App設(shè)計(jì)、建站公司、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

AJAX的使用方法