我们在用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);
});
});
五、运行结果