文档参考:https://www.w3school.com.cn/js/index.asp
文章根据个人工作经历,总结列举了常见的js中数据处理方法。文章使用的均为原生js脚本,涉及部分jquery和jsp脚本。
文章主要关注与前后台数据间的转换和处理。一般的,html界面通过form表单或ajax等发起请求后,参数信息可以通过js处理封装或直接在后台中通过HttpServletRequest对象的getAttribute方法获取相关参数,具体参数如何,可以通过日志或请求头查看参数结构信息,此处不再具体分析。同样的,后台参数也可以封装处理后通过HttpServletRequest的setAttribute方法或ModelAndView对象返回。
一、前台参数提交及获取
1、http post请求:
通过ajax或jquery将数据封装为json或对象,发送post,后台使用@RequestMapping或@RequestBody接收
@RequestMapping(value = "/aa/{name}", method = RequestMethod.POST)
public String func(Model model, @PathVariable("name") String name) {
...
}
2、Form提交:
<form action="/login" method="post">
name:<input type="text" name="name"/>
password:<input type="text" name="password"/>
<input type="submit"/>
</form>
后端只需在方法参数列表里接收传送过来的变量,而无需再指定查询参数或路径变量:
@RequestMapping(value = "/login", method = RequestMethod.POST)
public String yourMethod(Model model, String name, String password){
...
}
//delete请求
@RequestMapping(value="/testRest/{id}",method=RequestMethod.DELETE)
public String testRestDelete(@PathVariable Integer id)
{
System.out.println("testRest DELETE"+id);
return SUCCESS;
}
前台获取参数时使用$(参数)或{{参数}},依赖于前端框架。
后台响应后的返回值可以通过浏览器的响应信息查看数据格式,拿到对应的相应数据后,即可对数据处理,调用对应的方法等。
二、前台js中参数转换
eval()方法
解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下:
代码如下:
function toJson(str){
var json = eval('(' + str + ')');
return json;
}
该方法存在性能和安全方面的问题,不建议使用。
new Function方法
代码如下:
function toJson(str){
var json = (new Function("return " + str))();
return json;
}
JSON.parse()方法
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本,这些浏览器都已经接近W3C标准,默认实现了toJSON方法。代码如下:
JSON.parse(str);
stringifier 函数的作用跟 parse 相反, 用来将一个js对象转换为 JSON 文本。
var jsonText = JSON.stringify(obj);
三、后台数据处理流程
传入或创建HttpServletRequest对象(HttpServletRequest request=((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();),根据该对象内参数信息处理;有时后台拿到的直接是json或string,此时按需处理即可。
JSONArray的打印结果中有“[]”,而JSONObject最外层为“{}”
将list集合装成JSONArray对象
JSONArray jsonArray = JSONArray.fromObject(stuList);
将json字符串转成JSONArray
JSONArray jsonArray2 = JSONArray.fromObject(jsonString);
将JSONArray对象,重新还原成List对象集合
Object object = JSONObject.toBean((JSONObject) jsonArray.get(i),
Student.class);
将前台或页面获得String json字符串转成相应的JavaBean:
1、将该字符串转成相应的javaBean(相当于把从前台拿到的json字符串转成javaBean)
String jsonString = "{'age':23,'hobby':[1,2,3],'name':'桑伟东'}";
2、先将字符串再还原成JSONObject对象
JSONObject jsonObject2 = JSONObject.fromObject(jsonString);
3、将JSONObject对象还原成相应的javaBean ,打印结果如下
Student student2 = (Student) JSONObject.toBean(jsonObject2,
Student.class);
将后台数据分装后转string
user=userService.getUser(user);
//user对象里有日期,所有有日期的属性,
//都要按照此日期格式进行json转换(对象转json)
JsonConfig json =new JsonConfig();
json.registerJsonValueProcessor(Date.class,new JsonDateValueProcessor());
JSONObject jo=JSONObject.fromObject(user,json);
result=jo.toString();
四、附录
前后台数据处理转换案例
后台代码:
//ajax的json对象异步加载
@RequestMapping("/login.html")
@ResponseBody
public Object login(HttpSession session,@RequestParam String user){
logger.debug("======insert into login.html method=========>");
if(user == null || "".equals(user)){
return "nodata";
}else{
JSONObject userObject =JSONObject.fromObject(user);
User userObj=(User) userObject.toBean(userObject,User.class);
//
try {
if(userService.loginCodeIsExit(userObj)==0){
return "nologincode";
}else{
User _user=userService.getLoginUser(userObj);
if(null!=_user){
session.setAttribute(Constants.SESSION_USER, _user);
//lastLoginTime
User updateLoginTimeUser=new User();
updateLoginTimeUser.setId(_user.getId());
updateLoginTimeUser.setLastLoginTime(new Date());
userService.modifyUser(updateLoginTimeUser);
updateLoginTimeUser=null;
return "success";
}else{
return "pwderror";
}
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return "failed";
}
}
}
HTML代码:
<div class="form-horizontal">
<fieldset>
<div class="input-prepend" title="loginCode" data-rel="tooltip">
<span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="loginCode" id="loginCode" type="text" value="" />
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="password" data-rel="tooltip">
<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password" value="" />
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<ul id="formtip"></ul>
<p class="center span5">
<button type="submit" class="btn btn-primary" id="loginBtn">submit</button>
</p>
</fieldset>
</div>
JS代码
$("#loginBtn").click(function(){
var user = new Object();
user.loginCode = $.trim($("#loginCode").val());
user.password = $.trim($("#password").val());
user.isStart = 1;
if(user.loginCode == "" || user.loginCode == null){
$("#loginCode").focus;
$("#formtip").css("color","red");
$("#formtip").html("对不起,登录账号不能为空。");
}else if(user.password == "" || user.password == null){
$("#password").focus;
$("#formtip").css("color","red");
$("#formtip").html("对不起,登录密码不能为空。");
}else{
$("#formtip").html("");
$.ajax({
type:'POST',
url:'/SLSaleSystem/login.html',
data:{user:JSON.stringify(user)},
dataType:'html',
timeout:1000,
error:function(){
$("#formtip").css("color","red");
$("#formtip").html("登录失败!请重试。");
},
success:function(result){
if(result != "" && result == "success"){//若登录成功,跳转到"/main.html"
window.location.href='/SLSaleSystem/main.html';
}else if(result == "failed"){
$("#formtip").css("color","red");
$("#formtip").html("登录失败!请重试。");
$("#loginCode").val('');
$("#password").val('');
}else if(result == "nologincode"){
$("#formtip").css("color","red");
$("#formtip").html("登录账号不存在!请重试。");
}else if(result == "pwderror"){
$("#formtip").css("color","red");
$("#formtip").html("登录密码错误!请重试。");
}else if("nodata" == result){
$("#formtip").css("color","red");
$("#formtip").html("对不起,没有任何数据需要处理!请重试。");
}
}
});
}
});