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

来源：互联网发布：淘宝茶具套装编辑：程序博客网时间：2024/05/18 00:13

我们在用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转换的工具类

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

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

// 把对象转换为jsonvar 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);    });});

五、运行结果

阅读全文

0 0