jQuery+AJAX请求的统一封装

最新推荐文章于 2024-05-03 14:31:55 发布
最新推荐文章于 2024-05-03 14:31:55 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： 前端+Demo 文章标签： Jquery ajax ajax统一封装 ajax http请求 ajax封装http请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myyhtw/article/details/133576005
版权

记录一下使用jQuery+AJAX对http请求的统一封装

很久都没有使用jquery和ajax的组合了，这里记录一下jquery和ajax的组合简单封装 将来或许有机会重新启用这个组合

新建jquery.request.js；demo目录结构如下
myw


const baseURL = 'http://127.0.0.1:8116';

//  const baseURL = "";

const timeout = 3000;

// requet ajax
function request (url, method, data = {}, contentType, back){
    $.ajax({
        url: baseURL+url,
        type: method,
        data: data,
        cache: false,
        timeout: timeout,
        contentType: contentType,
        dataType: "json",
        success: function(res){
            console.log(res)
            return typeof back == "function" && back(res);
        },
        error: function(error) {
            console.log(error)
            return typeof back == "function" && back(null);
        }
    });   
};
function getAjaxRequst (url, data, callBack) {
    request(url, "GET", data, "application/x-www-form-urlencoded;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};
function postAjaxRequst (url, data, callBack) {
    request(url, "POST", data, "application/x-www-form-urlencoded;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};

index.html里jquery的引用必须放在request的前面

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.request.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.request.js"></script>
    <title>jquery.request-demo</title>
    <style></style>
</head>

<body>

<div class="">

</div>
<script type="text/javascript">

    $(function() {
        requestGetLoginDemo();
        requestPostLoginDemo();
    });

    function requestGetLoginDemo() {
        var data = { username: "myyhtw", password: "123456"}
        getAjaxRequst('/auth/login', data, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

    function requestPostLoginDemo() {
        var data = { username: "myyhtw", password: "123456"}
        postAjaxRequst('/auth/login', data, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

    
</script>

</body>

</html>

后端使用SpringBoot写了get和post请求登录的2个接口示例
myw
myw
这里使用的是application/x-www-form-urlencoded;charset=UTF-8，一般我们使用的都是json数据，于是呢可以改变下jquery.request.js

application/json;charset=UTF-8

// requet ajax json token
function httpJsonRequest (url, method, data = {}, token, contentType, back){
    $.ajax({
        url: baseURL+url,
        type: method,
        data: JSON.stringify(data),
        cache: false,
        timeout: timeout,
        headers: {'token': token},
        contentType: contentType,
        dataType: "json",
        success: function(res){
            console.log(res)
            return typeof back == "function" && back(res);
        },
        error: function(error) {
            console.log(error)
            return typeof back == "function" && back(null);
        }
    });   
};
function getAjaxJsonHttpRequst (url, data, token, callBack) {
    httpJsonRequest(url, "GET", data, token, "application/json;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};
function postAjaxJsonHttpRequst (url, data, token, callBack) {
    httpJsonRequest(url, "POST", data, token, "application/json;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};

index.html

$(function() {
    requestJsonGetLoginDemo();
    requestJsonPostLoginDemo();
});

function requestJsonGetLoginDemo() {
    var username = "myyhtw"; 
    var password = "123456";
    getAjaxJsonHttpRequst('/auth/login/'+username+"/"+password, null, null, function(res) {
        console.log(res)
        if(res){
            console.log("需要的数据")
        } else {
            console.log("返回数据不存在或者请求数据失败")
        }
    })
}

function requestJsonPostLoginDemo() {
    var data = { username: "myyhtw", password: "123456"}
    postAjaxJsonHttpRequst('/auth/login', data, null, function(res) {
        console.log(res)
        if(res){
            console.log("需要的数据")
        } else {
            console.log("返回数据不存在或者请求数据失败")
        }
    })
}

后端使用SpringBoot写了get和post请求json格式登录的2个接口示例

myw
myw

完整jquery.request.js



const baseURL = 'http://127.0.0.1:8116';

//  const baseURL = "";

const timeout = 3000;

// requet ajax
function request (url, method, data = {}, contentType, back){
    $.ajax({
        url: baseURL+url,
        type: method,
        data: data,
        cache: false,
        timeout: timeout,
        contentType: contentType,
        dataType: "json",
        success: function(res){
            console.log(res)
            return typeof back == "function" && back(res);
        },
        error: function(error) {
            console.log(error)
            return typeof back == "function" && back(null);
        }
    });   
};
function getAjaxRequst (url, data, callBack) {
    request(url, "GET", data, "application/x-www-form-urlencoded;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};
function postAjaxRequst (url, data, callBack) {
    request(url, "POST", data, "application/x-www-form-urlencoded;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};


// requet ajax json token
function httpJsonRequest (url, method, data = {}, token, contentType, back){
    $.ajax({
        url: baseURL+url,
        type: method,
        data: JSON.stringify(data),
        cache: false,
        timeout: timeout,
        headers: {'token': token},
        contentType: contentType,
        dataType: "json",
        success: function(res){
            console.log(res)
            return typeof back == "function" && back(res);
        },
        error: function(error) {
            console.log(error)
            return typeof back == "function" && back(null);
        }
    });   
};
function getAjaxJsonHttpRequst (url, data, token, callBack) {
    httpJsonRequest(url, "GET", data, token, "application/json;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};
function postAjaxJsonHttpRequst (url, data, token, callBack) {
    httpJsonRequest(url, "POST", data, token, "application/json;charset=UTF-8", function(res) {
        return typeof callBack == "function" && callBack(res)
    })
};

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.request.js"></script>
    <title>jquery.request-demo</title>
    <style></style>
</head>

<body>

<div class="">

</div>
<script type="text/javascript">

    $(function() {
        // requestGetLoginDemo();
        // requestPostLoginDemo();
        requestJsonGetLoginDemo();
        requestJsonPostLoginDemo();
    });

    function requestJsonGetLoginDemo() {
        var username = "myyhtw"; 
        var password = "123456";
        getAjaxJsonHttpRequst('/auth/login/'+username+"/"+password, null, null, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

    function requestJsonPostLoginDemo() {
        var data = { username: "myyhtw", password: "123456"}
        postAjaxJsonHttpRequst('/auth/login', data, null, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }


    function requestGetLoginDemo() {
        var data = { username: "myyhtw", password: "123456"}
        getAjaxRequst('/auth/login', data, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

    function requestPostLoginDemo() {
        var data = { username: "myyhtw", password: "123456"}
        postAjaxRequst('/auth/login', data, function(res) {
            console.log(res)
            if(res){
                console.log("需要的数据")
            } else {
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

    
</script>

</body>

</html>
蚂蚁舞
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node的http模块
学无止境
11-21 3954
Node的http模块与Ajax基本内容
jQuery 封装Ajax函数、FormData对象
YuLong的博客
08-27 620
文章目录
使用jQuery封装Ajax请求
m0_56186047的博客
11-24 1089
随着Web应用程序的发展，Ajax技术已被广泛应用于各种Web应用程序中。通过使用Ajax技术，可以提高用户体验和网站性能。而jQuery库则是目前最流行的JavaScript库之一，它简化了JavaScript开发和处理浏览器兼容性问题。在本文中，将介绍如何使用jQuery进行Ajax请求的封装。jQuery是一个快速、小巧、功能丰富的JavaScript库，它提供了许多有用的API，可以简化JavaScript编程和处理浏览器兼容性问题。
js请求封装ajax、统一响应
最新发布
凌康的博客
05-03 387
js请求封装ajax、统一响应。简单封装一个ajax请求，可自行调整响应内容用法
jQuery封装ajax
古城的博客
10-15 2371
jQuery实现对ajax的封装，使代码轻量化 AJAX—$.get() $.get()是一个简单的 GET 请求功能。请求成功时可调用回调函数。 $.get(url,[data],[callback],[type]) url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default 注意：请求是通过 URL 提交的 提交有大小限制（2KB） AJAX— $.p
猿创征文 | 使用Jquery封装的AJAX请求数据
叶子yes的博客
08-29 1035
该方法用于执行一个异步的ajax的请求。基本语法格式如下：（ 这里只列举了一些常用的参数，里面还有很多的参数，大家感兴趣的可以到上查看。）：String类型，发送请求的url地址：String类型，请求方式，比如post、get、put、delete等：PlainObject类型，请求头，使用对表示，例如：{ 'Content-Type': 'application/json' }PlainObject：纯粹的对象（即通过 "{}" 或者 "new Object" 创建的）......
关于jQuery封装AJAX
weixin_49847397的博客
06-01 628
ajax操作流程
JQuery对Ajax的三种封装
DSL95的博客
02-18 1775
JQuery对Ajax的三种封装 针对于get请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式 $.get("需要访问的Servlet的名称", { 参数1：值，参数2：值，... }, function(data){ alert("回调函数: " + data); }); 针对于post请求：其中参数可以写成“name=zs&age=22”这种形式，也可以写成json的格式 $.post("需要访问的
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
jQuery+Ajax+PHP+MySQL实现分类列表管理 中文WORD版
05-26
jQuery提供了内置的Ajax方法，如`$.ajax()`、`$.get()`和`$.post()`，使得发送Ajax请求变得更加容易。在客户分类列表管理中，用户可以使用Ajax无刷新加载或更新分类，提供流畅的操作体验。 PHP是一种服务器端的脚本...
ASP.NET中JQuery+AJAX调用后台
10-22
2. 在处理AJAX请求时，WebMethod必须是静态的，并且标记为`[WebMethod]`特性，这样才能被AJAX调用。 3. 由于ASP.NET WebMethod默认返回JSON格式的结果，因此前端需要正确解析这个结果。在本例中，前端代码假设返回...
Struts2+Jquery+Ajax
07-16
在Struts2框架下，我们可以使用Jquery的Ajax方法向服务器发送请求，获取JSON或XML数据，然后动态更新页面的部分内容。 在"06-mvc之struts2.ppt"中，可能涵盖了以下内容： 1. Struts2框架的基本概念和架构 2. 如何...
PHP+jQuery+Ajax多图片上传
08-30
在多图片上传中，jQuery用于处理用户与网页的交互，例如监听文件输入元素的变化，读取选中的文件，以及创建Ajax请求来发送这些文件到服务器。 **Ajax**（Asynchronous JavaScript and XML）是一种在不刷新整个页面...
JQuery中 异步处理ajax的封装和应用
2302_78717774的博客
06-27 256
dataType:"text", 携带的参数数据的类型，text，json，xml、//当输入框中的内容不为空的时候，用ajax 请求服务器 ，判断，该数据是否合法！//用响应对象，把我们是否被使用的used 状态，返回给客户端，让客户端进行处理。$("#nameDiv").html("用户名可以用~");//当输入框中的内容不为空的时候，用ajax 请求服务器 ，判断，该数据是否合法！值的名称1： "具体的值1" , 值的名称2： "具体的值2" , ……$.ajax({ })
AJAX手写JQuery框架封装AJAX请求和常见方法实现无DOM对象操作------AJAX
春风若有怜花意，可否许我再少年
11-17 102
AJAX手写JQuery框架封装AJAX请求和常见方法实现无DOM对象操作------AJAX
AJAX手写JQuery框架封装AJAX请求实现传参的方式发送请求------AJAX
春风若有怜花意，可否许我再少年
11-17 151
AJAX手写JQuery框架封装AJAX请求实现传参的方式发送请求------AJAX
异步编程Ajax的详解，并对其进行封装整理，网页前端开发
2401_83739434的博客
04-02 612
文章开头提到，JQuery早已对Ajax请求进行了成熟的封装，所以我们可以借鉴它，甚至尽可能地去模仿它进行封装，在这之前，我们得先了解JQuery中Ajax的使用。的小伙伴建议先花几分钟了解一下，因为这是异步编程最常用的一个语法，下面放上文章链接——[深入了解Promise对象，写出优雅的回调代码，告别回调地狱。其调用的是一个综合的方法，传入的参数是一个对象，对象中传入多个参数。这段代码是发送了一个。方法一样，只不过其内部的实现有略微的区别，就是携带参数的发送不一样，所以直接来看代码吧。
jQuery中对AJAX的封装
weixin_34161029的博客
01-19 87
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title></head><body>...
JQuery封装的ajax方法
Jianxq的博客
09-30 4172
JQuery封装的ajax方法​ JQuery封装的ajax优势：简单方便，已做好浏览器兼容性处理。
jquery ajax封装
09-14
jQuery的ajax封装主要分为三个步骤。首先，需要引入jQuery库。然后，通过代码实例来讲解。最后，根据代码注释来理解封装过程。 具体来说，封装的步骤如下： 1. 第一步：引入jQuery库。用户需要在页面中引入jQuery的库文件，可以通过以下方式引入： ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 这样就可以在页面中使用jQuery的功能了。 2. 第二步：使用jQuery的ajax方法进行封装。用户可以通过以下代码将ajax请求进行封装： ``` $('#id').click(function(){ $.ajax({ url: "http://localhost:3000/ind", type: "post/get", data: $('form').serialize(), dataType: 'json', success: function(result){ // 请求成功后的回调函数，result中存放的是服务器的响应数据 }, error: function(err){ console.log(err); } }); }); ``` 在这段代码中，通过给一个元素绑定点击事件，当该元素被点击时，发起ajax请求。可以根据实际需求，修改url、type、data等参数来满足不同的请求。 3. 第三步：高层封装。除了使用jQuery的ajax方法，还可以使用高层封装的post请求实现简洁的代码，代码如下： ``` $.post(url, [data], [callback], [type]); ``` 其中，url是请求的地址，data是待发送的参数，callback是请求成功后的回调函数，type是返回内容的格式。 综上所述，jQuery的ajax封装通过引入jQuery库、使用ajax方法进行封装以及高层封装来实现。这样可以简化代码，提高开发效率。同时，原生的Ajax也是一种封装方式，可以使用XMLHttpRequest对象来发送异步请求，通过open方法建立与服务器的连接，设置请求头信息，然后通过send方法向服务器发送请求，并通过onreadystatechange事件监听请求-响应状态的改变，并将响应信息写入页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值