Ajax封装

努力做一只合格的前端攻城狮

已于 2022-02-15 18:36:25 修改

阅读量1.1k

点赞数

分类专栏： node.js 文章标签： ajax javascript 前端

于 2022-02-15 18:28:19 首次发布

本文链接：https://blog.csdn.net/shao_xuan_/article/details/122930866

版权

node.js 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Ajax封装

ajax()封装
服务器部分
JQuery中的Ajax

ajax()封装

封装ajax()函数的参数对象，包括type请求方式、url请求地址、date请求数据、async异步or同步、success请求成功后处理请求结果的函数。

<!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>Document</title>
</head>

<body>
    <script>
        function ajax(options) {
            var params = formsParams(options.data);
            //创建对象
            var xhr = new XMLHttpRequest()
            // 连接
            if (options.type == "GET") {
                xhr.open(options.type, options.url + "?" + params, options.async);
                xhr.send()
            } else if (options.type == "POST") {
                xhr.open(options.type, options.url, options.async);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(params);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    options.success(xhr.responseText);
                }
            }
            function formsParams(data) {//处理数据
                var arr = [];
                for (var prop in data) {
                    arr.push(prop + "=" + data[prop]);
                }
                return arr.join("&");
            }

        }

        ajax({
            url: "http://localhost:3000/get",  // url:地址
            type: "GET",   // type : 请求方式
            async: true,   // async: 同步：false，异步：true 
            data: {        //传入信息
                name: "张三",
                age: 18
            },
            success: function (data) {   //返回接受信息
                console.log(data);
            }
        })
    </script>
</body>

</html>

服务器部分

这个服务器是一个get请求方式的，如需要post的请求方式则将二级路由的/get改为/post。

const express = require('express');
const path = require('path');
const app = express();
app.all('*', function(req, res, next) {//处理跨域问题

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header('Access-Control-Allow-Headers',['mytoken','Content-Type'])

    next();

});
app.use(express.static(path.join(__dirname, 'public')));
// 定义GET路由
app.get('/get', (req, res) => {
    res.send(req.query);
});
app.listen(3000);
console.log('服务器启动成功');

JQuery中的Ajax

jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

$.get()

JQuery中$.get()方法专门发送get请求，将服务器上的资源请求到客户端使用。

基本语法格式：

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

●url:[string]必须按参数，要请求的资源地址。
●data:[object]可选参数，请求数据。
●callback:[function]可选参数，请求成功后的回调函数。

不带参数的get请求

$.get('url',function (res) {
	console.log(res)
})

带参数的get请求

$.get('url',function (res)，{参数名:参数值} {
	console.log(res)
})

$.post()

JQuery中$.post()方法专门发送post请求，将服务器上的资源请求到客户端使用。

基本语法格式：

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

●url:[string]必须按参数，要请求的资源地址。
●data:[object]可选参数，请求数据。
●callback:[function]可选参数，请求成功后的回调函数。

不带参数的post请求

$.post('url',function (res) {
	console.log(res)
})

带参数的post请求

$.post('url',function (res)，{参数名:参数值} {
	console.log(res)
})

$.ajax()

jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行配置，从而响应不同的请求方式。其用法和ajax()相似。

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

●type: 请求的方式，例如 GET 或 POST。
●url: 请求的 URL 地址。
●data: {} 这次请求要携带的数据。
●success: function(res) {}请求成功之后的回调函数。

努力做一只合格的前端攻城狮

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax封装

Ajax封装ajax()封装服务器部分JQuery中的Ajax$.get()不带参数的get请求带参数的get请求$.post()不带参数的post请求带参数的post请求$.ajax()ajax()封装封装ajax()函数的参数对象，包括type请求方式、url请求地址、date请求数据、async异步or同步、success请求成功后处理请求结果的函数。<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫