springboot前端ajax 04 关于后台传的时间和状态在前端的转换

Posted 2023-04-07 qq_38757863

修改状态及时间格式
在jsp中，时间显式：

只需要把json的时间部分改为用Date对象来显示就好了。

<td>+new Date(jsonObj[i].startTime).toLocaleString()+</td>

<td>+new Date(jsonObj[i].endTime).toLocaleString()+</td>

状态对象
由于state的值是0/1，在前端显示的不好看。用三元运算符解决这个问题。
<td>+(jsonObj[i].state?"进行中":"已结束")+</td>

关于SpringMvc的ajax请求的问题

利用springmvc接收前台ajax传过来的数据完成注册功能。

为了方便把，前台js的model和后台的user写成一致的功能。代码如下

前端：

var User = function() {

var id = null;

var name = null;

var password = null;

var sex = null;

var telephone = null;

var role = null;

var regist_time = null;

var email_address = null;

var active_code = null;

var status = null;

var checkCode = null;

this.setId = function(_id) {

id = _id;

};

this.getId = function() {

return id;

}

this.setName = function(_name) {

name = _name;

};

this.getName = function() {

return name;

}

this.setPassword = function(_password) {

password = _password;

};

this.getPassword = function() {

return password;

}

this.setSex = function(_sex) {

sex = _sex;

};

this.getSex = function() {

return sex;

}

this.setTelephone = function(_telephone) {

telephone = _telephone;

};

this.getTelephone = function() {

return telephone;

}

this.setRole = function(_role) {

role = _role;

};

this.getRole = function() {

return role;

}

this.setRegist_time = function(_regist_time) {

regist_time = _regist_time;

};

this.getRegist_time = function() {

return regist_time;

}

this.setEmail_address = function(_email_address) {

email_address = _email_address;

};

this.getEmail_address = function() {

return email_address;

}

this.setActive_code = function(_active_code) {

active_code = _active_code;

};

this.getActive_code = function() {

return active_code;

}

this.setStatus = function(_status) {

status = _status;

};

this.getStatus = function() {

return status;

}

this.setCheckCode = function(_checkCode) {

checkCode = _checkCode;

}

this.getCheckCode = function() {

return checkCode;

}

this.getUserObj = function() {

return{

"id" : id,

"name" : name,

"password" : password,

"sex" : sex,

"telephone" : telephone,

"role" : role,

"regist_time" : regist_time,

"email_address" : email_address,

"active_code" : active_code",

"status" : status,

"checkCode" : checkCode,

};

}

};

后台代码：

package org.klh.book_store.model;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.Id;

import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonInclude;

import com.fasterxml.jackson.annotation.JsonInclude.Include;

@Entity

@Table (name="user_info")

@JsonInclude(value=Include.NON_NULL)

public class User {

@Id

@Column(name="id")

private int id;

@Column(name="name")

private String name;

@Column(name="password")

private String password;

@Column(name="sex")

private String sex;

@Column(name="telephone")

private String telephone;

@Column(name="role")

private String role;

@Column(name="regist_time")

private String regist_time;

@Column(name="email_address")

private String email_address;

@Column(name="active_code")

private String active_code;

@Column(name="status")

private String status;

@Column(name="checkCode")

private String checkCode;

public User() {

}

public User(int id, String name, String password, String sex, String telephone, String role, String regist_time,

String email_address, String active_code, String status, String checkCode) {

this.id = id;

this.name = name;

this.password = password;

this.sex = sex;

this.telephone = telephone;

this.role = role;

this.regist_time = regist_time;

this.email_address = email_address;

this.active_code = active_code;

this.status = status;

this.checkCode = checkCode;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

public String getTelephone() {

return telephone;

}

public void setTelephone(String telephone) {

this.telephone = telephone;

}

public String getRole() {

return role;

}

public void setRole(String role) {

this.role = role;

}

public String getRegist_time() {

return regist_time;

}

public void setRegist_time(String regist_time) {

this.regist_time = regist_time;

}

public String getEmail_address() {

return email_address;

}

public void setEmail_address(String email_address) {

this.email_address = email_address;

}

public String getActive_code() {

return active_code;

}

public void setActive_code(String active_code) {

this.active_code = active_code;

}

public String getStatus() {

return status;

}

public void setStatus(String status) {

this.status = status;

}

public String getCheckCode() {

return checkCode;

}

public void setCheckCode(String checkCode) {

this.checkCode = checkCode;

}

@Override

public String toString() {

return "User [\nid=" + id + ",\n name=" + name + ", \npassword=" + password + ", \nsex=" + sex + ", \ntelephone="

+ telephone + ", \nrole=" + role + ",\n regist_time=" + regist_time + ",\n email_address=" + email_address

+ ",\n active_code=" + active_code + ",\n status=" + status + ",\n checkCode=" + checkCode + "\n]";

}

}

在controller里面的代码如下：主要是处理关于注册端的业务逻辑，想着接收到数据用邮箱验证，而且邮箱发送代码也已经测试通过。接下来就是前台通过ajax发送数据就好了。

@Controller

public class Register {

public Register() {

}

@RequestMapping(value="/register", method=RequestMethod.POST,

produces="application/json;charset=UTF-8")

@ResponseBody

public User doUserLogin(HttpServletRequest request, HttpServletResponse response, User user) throws IOException {

System.out.println(request.getMethod());

System.out.println(request.getContextPath());

System.out.println("ajax进来了");

System.out.println(user);

//System.out.println(UUID.randomUUID().toString());

//SendJMail.sendMail("[email protected]", "一次伟大的尝试");

return null;

}

}

前台ajax发送代码如下：

var url = “./register”

$$.$setAction(pro + ".registAction",function(newUser,url,success,error) {

$$.$ajax({

url : url,

data :newUser,

async : true,

success : success,

error : error

});

});

但是老是显示badrequest400. 这就很尴尬，然后通过百度才知道。Springmvc下ajax利用json数据和后台交互时。必须得保证数据和后台model里面的数据量是一致的。简单来说，就是我注册页面的数据没有填满我前端的js下的user对象。

然后改成如下情况：

. . . 

this.getUserObj = function() {

return{

"id" : id || 0,

"name" : name,

"password" : password,

"sex" : sex,

"telephone" : telephone,

"role" : role || "普通用户",

"regist_time" : regist_time || new Date().toLocaleTimeString(),

"email_address" : email_address,

"active_code" : active_code || "未设定",

"status" : status || "0",

"checkCode" : checkCode,

};

}

. . .

然后执行：后台打印数据如下

POST

/%E5%9C%A8%E7%BA%BF%E4%B9%A6%E5%9F%8E0.2

ajax进来了

User [

id=0,

 name=hzg, 

password=123, 

sex=1, 

telephone=15829243533, 

role=普通用户,

 regist_time=下午2:28:19,

 [email protected],

 active_code=未设定,

 status=0,

 checkCode=ymxq

]

总结：就是在springmvc下，利用json和后台交互时，必须的保证数据量的一致性，所以建议在没有值得情况下，最好给一些默认值。