在进行Web编程时,我们常需要一个页面模板,然后动态从数据库中读入数据到页面中,填充页面内容,使页面在不刷新不改变URL的情况下改变内容。下面是我常用的一种的post请求数据的方法。
原理图
使用MVC架构
1、前端HTML可以视为View(视图),用于直接改变界面UI
2、JavaScript (JQuery)作为页面的Controller(控制器),作为连接前后端的桥梁
3、服务端(PHP/Java 、数据库)作为Model(模型),接收JQuery传来的数据,并返回Json数据给JQuery
实例
前端HTML - test.html
<body>
<div>
<form>
用户名: <input type="text" name="name" id="usr-name"><br>
密码: <input type="password" name="password"
id="usr-password">
</form>
</div>
<script>
let name = $('#usr-name').val();
let password = $('#usr-password').val();
$.post('test/testjava.do',{
name : name,
password:password
}
, function (ret) {
//解析ret
ret = eval("(" + ret + ")");
if (ret['error'] === 0) {
alert("处理成功!");
}
else {
alert("处理失败!");
}
});
</script>
</body>
若使用Java作为后端语言(纯Servlet)- TestServlet.java
/**
* 接收JQuery发送的数据,并返回Json
* @author TimVan
*/
@WebServlet(name = "TestServlet",
urlPatterns = {"/test/testjava.do"},
loadOnStartup = 1)
public class TestServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException {
doPost(request, response);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("application/text; charset=utf-8");
PrintWriter out = response.getWriter();
//获得JQuery传入的数据
String name = request.getParameter("name");
String password = request.getParameter("password");
//返回Json键值对 (使用HashMap)
Map<String, Object> ret = new HashMap<>(1);
//可以在这里使用JDBC连接数据库,获得数据
if (true) {
ret.put("error", 0);
}
else {
ret.put("error", 1);
ret.put("errorInfo", "处理出错");
}
//使用 Alibaba fastJson 序列化 ret
String retJson = JSON.toJSONString(ret);
out.write(retJson);
}
}
若使用PHP作为后端语言 - testPHP.php
/**
* 获得管理员登录用户自己的ID值
* Created by PhpStorm.
* User: 87702
* Date: 2018/11/01
*/
session_start();
$name = '';
$isSuccess = 0;
//判断学号是否存在
if (!empty($_SESSION['name']) && $_SESSION['name'] != 0) {
$isSuccess = 1;
$name = $_SESSION['name'];
}
if ($isSuccess == 1){
$result = array('error' => 0);
$result['results'] = array(
'data' => $name
);
}
else{
//有错误
$result = array('error' => 1);
}
//将数据转为Json格式
$retaval = json_encode($result,JSON_UNESCAPED_UNICODE);
echo $retaval;
优缺点
-优点
1、不刷新页面的情况下,改变页面内容,提高用户体验
2、采用MVC架构,解耦各组件关联度,方便进行替换与代码复用(跨后端语言)。不破坏各语言自身的特性,使前后端分离,便于设计、开发、维护人员分工。
3、比起其他请求的数据方法,在防止CSRF(跨站请求伪造)攻击上更有优势
4、拥有post请求的全部优点
-劣势
1、和原生的PHP、JSTL直接页面修改相比,此方法速度相对较慢
2、由于不改变URL,页面内容动态生成,不利于分享页面和SEO(搜索引擎收录)
3、拥有post请求的全部缺点