简单web网页与SSM后台交互

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

情况说明

如今，已经搭建好SSM后台开发环境，并且可以经由postman工具测试成功。现在尝试写出web前端网页，通过实现简单的提交、注册、查询功能来加深对前后端数据传输格式、接口设置等理解。

编程思路

大体的思路得正确，为实现以上需求，首先需要确定的是，主要编写简单网页的方式是通过js实现点击按钮向后台发送get或post请求。

实现结果

由于笔者前端js语言应用经验较少，首先在网上找到简单网页的代码模板，如下：

test.html

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript" src="submit.js"></script> </head><body> <form name="myform" method="post"> <label for="user">用户名</label> <input type="text" id="user" name="user" value="d"> <br /> <label for="password">密码</label> <input type="password" id="password" name="password" value="d"> <br /> <label for="user">原名</label> <input type="realName" id="realName" name="realName" value="lallll"> <br /> <input type="button" id="submit" name="submit" value="登录" onclick="Submit()"> <input type="button" id="signUp" name="signUp" value="注册" onclick="SignUp()"> <br /> <label for="user">用户id</label> <input type="text" id="userId" name="userId" value="6"> <br /> <input type="button" id="query" name="query" value="查询" onclick="Query()"> </form> </body>

整个代码结构还是比较清晰的，就是最基本的html结构，需要注意的是在head部分引入了两个src。针对以上代码做一点说明：

其中一个是在线引用jQuery。jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。总而言之，jQuery可以帮助你更加方便的实现js发送get或post请求
另外一个是引入submit.js。submit.js是另一个文件，主要负责具体实现get或post请求。
在input/button标签或者需要发送数据的地方，增加一个onclick的属性，这些方法在submit.js中实现。

submit.js

对以上代码做几点说明：

以上三个方法的实现有很多相似之处，大体框架是一样的。
编程小技巧：console.log($('#userId').val())可以把需要观察的值写在日志里，在浏览器端F12就可以在控制台看到
针对具体运行结果是走success还是error，主要看发送get或post请求后，后台返回的状态码(是OK还是NOT_FOUND)。另外success中function括号中可能包含的data只是接受返回的数据，名字无所谓的。比如Submit.js对应的后台登录代码：

//返回类型是ResponseEntity(可以添加HttpStatus状态码) @RequestMapping(value="enterUser", method={RequestMethod.POST, RequestMethod.GET}) public ResponseEntity<User> EnterUser(@RequestBody User user){ System.out.println(user); User check_userName = userService.check(user); if (check_userName == null) return new ResponseEntity<>(HttpStatus.NOT_FOUND); return new ResponseEntity<>(userService.EnterUser(user), HttpStatus.OK); }

bug说明(本次练习遇到两次靠自己没能解决的bug，好在得到师兄的帮助解决了)

首先的问题是码完test.html和submit.js后，双击test.html运行，结果在chrome上显示如图：

在Firefox上显示如图：可以得到结论，火狐浏览器在开发者角度上很不错，尤其在针对国内开发者。两个浏览器都显示是跨域请求出现了问题，在网上找了一遍，很多解决办法，但是好像都挺复杂的。尝试了其中一种，安装chrome插件 Allow-Control-Allow-Origin: *，同样也给Firefox安上插件，然并卵。