jQuery中实现AJAX请求

最新推荐文章于 2024-08-03 17:05:14 发布

爱程序的大马猴

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量805

点赞数

文章标签： ajax jquery javascript express html5

本文链接：https://blog.csdn.net/weixin_62922379/article/details/130753601

版权

jQuery中对ajax请求做了封装，因此我们在使用的时候可以直接调取使用

GET请求

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

url:请求的url地址
data:请求的参数
callback：请求的载入成功时的回调函数
type：设置返回内容格式，xml, html, script, json, text, _default。

PSOT请求

$.post(url,[data],[callback],[type])
里面的参数与get请求一致

服务端

// 1.引入express文件
const express = require('express')
// 创建应用对象
const app = express()
// jQuery服务
app.all('/jquery-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // // 响应头
    // response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应
    // response.send('Hello jQuery Ajax')
    const data = { name: '王五' }
    response.send(JSON.stringify(data))
})
axios服务
app.all('/axios-server',(request,respone)=>{
	//设置响应头 允许跨域
	respone.setHeader('Access-Control-Allow-Origin','*');
	respone.setHeader('Access-Control-Allow-Headers','*');
	//设置响应
	const data = {name:'张三'}
	respone.send(JSON.stringify(data))
})
// fetch服务
app.all('/fetch-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应
    // response.send('Hello jQuery Ajax')
    const data = { name: '王五' }
    response.send(JSON.stringify(data))
})
 // 监听端口启动服务
app.listen('8000', () => {
    console.log('服务器已经启动，8000端口监听中');
})

客户端

jQuery请求客户端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX请求</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-hander">
            jQuery发送AJAX请求
        </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法发送ajax</button>
    </div>
    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                    console.log(data);
                }, 'json')
                // console.log('test');
            })
            $('button').eq(1).click(function () {
                $.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                    console.log(data);
                }, 'json')
                // console.log('test');
            })
            $('button').eq(2).click(function () {
                $.ajax({
                    // url
                    url: 'http://127.0.0.1:8000/delay',
                    // 参数
                    data: {
                        a: 100,
                        b: 200
                    },
                    // 请求类型
                    type: 'GET',
                    // 成功的回调
                    success: function (data) {
                        console.log(data);
                    },
                    // 超时！
                    timeout: 2000,
                    // 失败的回调
                    error: function () {
                        console.log('出错了');
                    }
                })
            })
        })
    </script>
</body>

</html>

axios请求客户端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 ajax 请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button')

        // 配置baseURL 
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            // GET请求
            axios.get('http://127.0.0.1:8000/axios-server', {
                // url参数
                params: {
                    id: 100,
                    vip: 7
                },
                // 请求头信息
                headers: {
                    name: 'zhangsan',
                    age: 20
                }
            }).then((value) => {
                console.log(value);
            }).catch((err) => {
                console.log(err);
            });
        }
        btns[1].onclick = function () {
            axios.post('axios-server', {
                userName: 'admin',
                passWord: 'admin'
            }, {
                params: {
                    id: 200,
                    vip: 9
                },
                headers: {
                    width: 200,
                    heigeh: 200
                }
            }).then((value) => {
                console.log(value);
            }).catch((err) => {
                console.log(err);
            });
        }
        btns[2].onclick = function () {
            axios({
                // 请求方法
                method: 'post',
                // url
                url: '/axios-server',
                //url参数
                params: {
                    vip: 10,
                    level: 30,


                },
                // 头信息
                headers: {
                    a: 100,
                    b: 200
                },
                // 请求体参数
                data: {
                    userName: 'admin',
                    passWord: 'admin'
                }
            }).then(value => {
                console.log(value);
                // 响应状态码
                console.log(value.status);
                // 响应字符串
                console.log(value.statusText);
                // 响应头
                console.log(value.headers);
                // 响应体
                console.log(value.data);
            })
        }
    </script>
</body>

</html>

fetch服务客户端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch函数 发送 ajax请求</title>
</head>

<body>
    <button>ajax请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function () {
            fetch('http://127.0.0.1:8000/fetch-server', {
                // 请求方法
                method: 'post',
                // 请求头
                headers: {
                    name: 'zhangsan'
                },
                // 请求体
                body: 'userName=admin&passWord=admin'
            }).then(response => {
                // console.log(response);
                return response.text();
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

</html>

以上是jQery对Ajax发送请求里面可能涉及到jQuery,bootstrap,axios, 如果不想去下载我们可以bootCDN中找到对应的在线链接我们使用的时候使用标签引入即可

爱程序的大马猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中实现AJAX请求

以上是jQery对Ajax发送请求里面可能涉及到jQuery,bootstrap,axios, 如果不想去下载我们可以。type：设置返回内容格式，xml, html, script, json, text, _default。中找到对应的在线链接我们使用的时候使用标签引入即可。callback：请求的载入成功时的回调函数。里面的参数与get请求一致。// 配置baseURL。url:请求的url地址。data:请求的参数。
复制链接

扫一扫