jQuery裡如何使用ajax傳送請求

2021春節晚會發表於2021-01-04
jQuery

回到文章總目錄

本篇文章介紹的是在jQuery裡如何使用ajax傳送請求

jquery裡面的單純的get請求和單純的post請求比較簡潔的，也比較簡易
jquery裡面ajax通用方法（自定義個化強）
jquery裡面ajax通用方法的get請求可以設定（請求型別，引數，頭資訊）
jquery裡面ajax通用方法的post請求可以設定（請求型別，引數，頭資訊，請求體）
以下的介紹案例，日常中是絕對夠用了。

get請求

$.get(url,[data],[callback],[type])
url:請求的URL路由地址
[data]:請求攜帶的引數
[callback]:載入成功時回撥函式
[type]:設定返回內容格式

post請求

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

在貓雲的加速cdn裡面獲取jquery的連結
https://www.bootcdn.cn/

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

案例

測試圖為
通過jquery裡面的get,post,ajax方法獲取服務端返回的結果
在這裡插入圖片描述jquery裡面的ajax方法中個get請求設定請求頭
在這裡插入圖片描述
1.建立在testten資料夾並在這個資料夾裡面
2.建立simpel.html檔案
3.建立server.js檔案
測試程式碼為

simpel.html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 存放jquery連結  -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <!-- 新增允許跨源屬性獲取連結  向該連結傳送請求的時候不會傳送當前域名下的cookies  一般當前域名的cookies存放著你的帳號密碼-->
        <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <button style="background-color: tomato;">GET,非json資料格式</button>
    <button style="background-color: tomato;">GET,json格式資料返回</button>
    <button style="background-color: violet;">POST,json格式資料返回</button>
    <button style="background-color: chartreuse;">通用ajax請求</button>
    <div id="result" style="width: 180px;height: 100px;border: solid 2px teal;"></div>
    <script>
        //  jquery裡面的get請求        服務端設定了字串格式返回
        // jquery設定繫結事件 第二個按鈕（下標為1的按鈕）,繫結事件函式為點選        $('button').eq(0).click(function(){});
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jqueryget',{a:300,b:400},function(data){
                console.log(data);
            })
        });
        // jquery裡面的get請求         服務端設定了json格式返回 前端get的請求引數也設定了json格式接收
        // jquery設定繫結事件 第一個按鈕（下標為0的按鈕）,繫結事件函式為點選        $('button').eq(0).click(function(){});
        $('button').eq(1).click(function(){
            $.get('http://127.0.0.1:8000/jquerygetjson',{a:100,b:200},function(data){
                console.log(data);
                // 設定返回內容格式——json資料格式
                },'json')
        });
        // jquery裡面的post請求   服務端設定了json格式返回 前端post的請求引數沒有設定接收格式
         // jquery設定繫結事件 第二個按鈕（下標為1的按鈕）,繫結事件函式為點選        $('button').eq(0).click(function(){});
        $('button').eq(2).click(function(){
            $.post('http://127.0.0.1:8000/jquerypostjson',{a:300,b:400},function(data){
                console.log(data);
                // 設定返回內容格式——不新增json格式，則前端顯示的為字串
                })
        });

        // 使用jquery通用方法來進行ajax請求
        $('button').eq(3).click(function(){
            $.ajax({
                // url
                url: 'http://127.0.0.1:8000/jqueryajax',
                // 引數
                data:{a:500,b:600},
                // 請求型別
                type:'GET',
                // 響應體結果格式設定   不設定則為字串    如果設定了json格式資料接收，返回的結果不是json則會報錯
                dataType: 'json',
                // 成功的回撥
                success: function(data){
                console.log(data);
                },
                // 其他設定
                // 超時時間
                timeout: 3000,
                // 失敗的回撥，測試這個，設定後端返回的時間延時就可以了,後端設定延時1秒，這裡可以設定1秒就行，必定出錯成功
                error:function(){
                    console.log("出錯了，超時成功。");
                },
                // 設定頭資訊
                headers:{qq: 999,weixin: 999}
            });
        });
    </script>
</body>

</html>

server.js檔案

// 1. 引入express
const express = require('express');

// 2.建立物件
const app = express();
// 3.建立路由規則  裡面的形參 request與response   (自己可以隨便定義名字的)
//  建議寫成  request與response  因為可以見名思意，方便自己看
// request  對請求報文的封裝
// responst 對響應報文的封裝
//  請求路徑為'/server'

// 當使用post請求時候會因為傳送的資訊沒有收到對應的結果所以回報錯
// 所以該處使用all  表示可以接收任意型別的請求      如get post 等等


// 一：get請求
app.get('/jqueryget', (request, response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('get請求成功，非json資料返回.');
});
// 二 ：get請求json資料
app.get('/jquerygetjson', (request, response)=>{
    // 設定響應頭 設定允許跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 響應頭        *號表示所有的頭資訊都可以接收
    response.setHeader('Access-Control-Allow-Headers','*');
    // 響應一個資料   把這個物件返回給瀏覽器
    const data = {
        name: 'get請求，服務端設定了json格式返回 前端get的請求引數也設定了json格式接收'
    };
    // 對物件進行字串轉換
    let str = JSON.stringify(data);
    setTimeout(()=>{response.send(str);},1000);
});
// 三：post請求 json資料
app.post('/jquerypostjson', (request, response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name: 'post請求，服務端設定了json格式返回 但是前端post的請求引數沒有設定接收格式'
    };
    let str = JSON.stringify(data);
    setTimeout(()=>{response.send(str);},1000);
});

// 四：ajax通用請求
app.all('/jqueryajax', (request, response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {name: 'jquery的通用請求GET請求，服務端設定了json格式返回 前端的請求引數設定接收格式為json'};
    let str = JSON.stringify(data);
    setTimeout(()=>{response.send(str);},1000);
});

// 4. 監聽埠啟動服務
// 這裡listen(8000)後面新增了一個回撥，用來提示，告訴自己是否監聽成功
app.listen(8000, ()=>{
    console.log("服務已經啟動，8000埠監聽中......");
});

更多的方法可以參考以下網址
https://jquery.cuishifeng.cn/

相關文章