Jquery微型架构:requestBody网络请求的模式与自定义协议的封装

最新推荐文章于 2023-10-07 09:56:03 发布

宝华的小岛

最新推荐文章于 2023-10-07 09:56:03 发布

阅读量1.5k

点赞数 1

分类专栏： HTML5 架构文章标签： jquery 异步请求架构封装

本文链接：https://blog.csdn.net/xxkalychen/article/details/78664650

版权

HTML5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

架构

7 篇文章 0 订阅

订阅专栏

我们在用html三剑客编写网站或者后台管理程序的时候，现在多数使用异步请求。如果使用jquery，异步请求很方便。

我们的项目，后台使用java springboot设计，统一套用了自定义的请求协议，方便各端进行模式化封装。请求方式也全部统一成了post请求，所有协议和请求参数，一级返回的协议和数据也都全部打包生成json，构建到RequestBody中进行发送。

我本来是做Android的，后来到新公司写java后台。按照我的习惯，我已经把相关的加够封装好了。出于兴趣，还有时不时会出现一些简单的做管理后台的需求，我也会接触html对网络的请求。于是我就做了一个html的基本架构模型。

一、首先需要创建项目，把项目程序的结构做一点规划。

二、需要导入一些必要的库。我爸需要导入的库放入baseimport.html文件进行了统一处理，减少了繁琐的操作，便于统一管理。

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="../js/login.js"></script>

三、设计一个页面login.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="text/html;charset=UTF-8">
    <title>登录系统</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="../js/login.js"></script>
</head>
<body>
<h1>登录</h1>
<hr>
<table>
    <tr>
        <td>手机号码：</td>
        <td><input id="username" type="text" name="userName" value="chris"/></td>
    </tr>
    <tr>
        <td>AuthCode：</td>
        <td><input id="password" type="text" name="password" value="gk123456"/></td>
    </tr>

    <tr>
        <td colspan="2">
            <button id="login" style="width: 100%">登录</button>
        </td>
    </tr>
</table>

<div id="info"></div>
</body>

</html>

四、然后是一系列的js文件

1. properties.js文件，存放系统常量

var baseUrl="http://192.168.2.19:8080/"

2. bean.js文件，存放网络请求实体类，有了这个，以后的处理既简洁又方便

//请求体类
var WebRequest = function (data) {
    this.token = "";
    this.ver = "";
    this.data = data;

    this.setToken = function (token) {
        this.token = token;
    }
    this.setVer = function (ver) {
        this.ver = ver;
    }
    this.setData = function (data) {
        this.data = data;
    }
}

//登录请求参数类
var LoginParams = function () {
    this.name = "";
    this.password = "";

    this.setName = function (name) {
        this.name = name;
    }
    this.setPassword = function (password) {
        this.password = password;
    }
}

3. jsonutils.js文件，进行json转换的工具类

// 把对象转换为json
var ToJson = function (data) {
    return JSON.stringify(data);
}

4. requestutils.js文件，进行网络异步请求的工具类

// 把对象转换为json
var RequestBodyAjax = function (url, requestBody,callback) {
    $.ajax({
        type: 'post',
        url: url,
        data: requestBody,
        contentType: 'application/json',
    }).success(function (data) {
        console.debug(data);
        callback(data);
    }).error(function () {
        alert("request failed");
    });
}

5.login.js文件，和login.html页面绑定的程序文件，这是本次封装的最后一个文件，也是最核心的一个文件。前面的所有封装都是为这个文件服务的。

//为页面引入实体类文件
document.write("<script type='text/javascript' src='../js/properties.js'></script>")
document.write("<script type='text/javascript' src='../js/beans.js'></script>")
document.write("<script type='text/javascript' src='../js/jsonutils.js'></script>")
document.write("<script type='text/javascript' src='../js/requestutils.js'></script>")

$(function () {
    $("#login").click(function () {
        var userName = $("#username").val();//用户名
        var password = $("#password").val();//密码

        //  创建参数对象
        var params = new LoginParams();
        params.setName(userName);
        params.setPassword(password);

        //  创建请求体
        var loginRequest = new WebRequest(params);
        //这里只是示范架构，token应该是登录之后获取的
        //而且要写入到本地，方便各处调用
        loginRequest.setToken("ttyyuuii");
        loginRequest.setVer("1.0");

        // 构建requestBody
        var requestBody = ToJson(loginRequest);

        // 构建请求回调
        var callback = function (data) {
            $("#info").html(data);
        }

        // 发起异步请求
        var url = baseUrl + 'getUser';
        RequestBodyAjax(url, requestBody, callback);
    });

});

五、运行结果

宝华的小岛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery微型架构:requestBody网络请求的模式与自定义协议的封装

我们在用html三剑客编写网站或者后台管理程序的时候，现在多数使用异步请求。如果使用jquery，异步请求很方便。我们的项目，后台使用java springboot设计，统一套用了自定义的请求协议，方便各端进行模式化封装。请求方式也全部统一成了post请求，所有协议和请求参数，一级返回的协议和数据也都全部打包生成json，构建到RequestBody中进行发送。我本来是做Android的，
复制链接

扫一扫