本文github:https://github.com/CtrlZ1/java-.git
本文背景:
在学习java web的过程中,前后台传值的问题是很令人头痛的问题,那么看了本文,就可以有效缓解。
文件目录:
1.首先,后台向前台的jsp页面传值:
实体类:
package com.example.demo.entity;
public class User {
private String username;
private String password;
public User(){}
public User(String username,String password){
this.username=username;
this.password=password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
后台Controller: 这个很清楚吧应该,在地址栏输入localhost:8080/index的时候,model已经运行完了,然后在返回的index页面就能看见model传递过的这些值。
@ModelAttribute
public void model(Model model){
User user=new User("xiaoming","123456");
//传对象
model.addAttribute("user",user);
//传字符串
model.addAttribute("string","后台传递过来的字符串");
//传map
Map<String,User> map=new HashMap<String, User>();
map.put("user1",user);
model.addAttribute("map",map);
//传递列表
List<User> list=new ArrayList<User>();
list.add(user);
list.add(user);
model.addAttribute("list",list);
}
@RequestMapping("index")
public String index(){
return "index";
}
这里把需要的字符串,map,list,对象,都用model来存储,然后在前台提取。
前台代码:
<h2>从后台获取的用户名和密码:<%=request.getAttribute("user").toString()%></h2>
<h2>${user.username} ${user.password}</h2>
<h2>${string}</h2>
<h2>后台传过来的map${map.get("user1").toString()}</h2>
<h2>后台传过来的列表${list.get(0)}</h2>
运行效果:
2.后台向前台的js传值:
js是无法读取el表达式的,所以,通常后台与js的通信是通过一种轻量级的传输方式来进行的,那就是json。所以,在后台我们需要向前台传递json,然后前台来读取展示。
后台Controller:
下面是专为json的两个方法,JSONArray用来转数组,字符串,list,JSONObject用来转map,对象。
//可以把实体类,实体类数组,list,map,字符串,等等转化为json形式
public static String toJson1(Object result)
{
if(result!=null){
JSONArray obj=JSONArray.fromObject(result);
return(obj.toString());
}
return null;
}
public static String toJson2(Object result)
{
if(result!=null){
JSONObject obj=JSONObject.fromObject(result);
return obj.toString();
}
return null;
}
下面是model函数的完整版:
@ModelAttribute
public void model(Model model){
User user=new User("xiaoming","123456");
//传对象
model.addAttribute("user",user);
//传字符串
model.addAttribute("string","后台传递过来的字符串");
//传map
Map<String,User> map=new HashMap<String, User>();
map.put("user1",user);
model.addAttribute("map",map);
//传递列表
List<User> list=new ArrayList<User>();
list.add(user);
list.add(user);
model.addAttribute("list",list);
//对象转json
model.addAttribute("json_user",toJson2(user));
//字符串转json
model.addAttribute("json_string",toJson1("['json is easy']"));//一定要放进[]里
//list转json
model.addAttribute("json_list",toJson1(list));
//map转json
model.addAttribute("json_map",toJson2(map));
}
然后是index页面的js:
<script type="text/javascript">
var x1=${json_user}
alert(x1.password)
var x2=${json_string}
alert(x2)
var x3=${json_list}
alert(x3[0].username)
//要这样读取map
var x4=eval("("+'${json_map}'+")")
alert(x4["user1"].password)
</script>
3.说完了后台向前台,现在讲前台向后台传值:
话不多说,直接上前台jsp模拟登录的html代码和js的代码:
<center>
<form action="/getdata">
<h2>从后台获取的用户名和密码:<%=request.getAttribute("user").toString()%></h2>
<h2>${user.username} ${user.password}</h2>
<h2>${string}</h2>
<h2>后台传过来的map${map.get("user1").toString()}</h2>
<h2>后台传过来的列表${list.get(0)}</h2>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><input type="button" value="提交" id="TJ"></td>
</tr>
</table>
</form>
</center>
<script type="text/javascript">
var x1=${json_user}
//alert(x1.password)
var x2=${json_string}
//alert(x2)
var x3=${json_list}
//alert(x3[0].username)
var x4=eval("("+'${json_map}'+")")
//alert(x4["user1"].password)
//对象
var user=new Object();
//对象数组
var list_of_user=[]
$('#TJ').click(function(){
user.username=$.trim($("#username").val());
user.password=$.trim($("#password").val());
list_of_user.push(user);
list_of_user.push(user);
$.ajax({
type:'POST',
url:'/getdata1',
data:{ObjectUser:JSON.stringify(list_of_user)},
dataType:'text',
timeout:1000,
success:function(result){
if (result=="success")
window.location.href='views/success.jsp';
}
})
})
</script>
很容易看出,我在js里写了一个对象,和一个对象数组,我的目标就是向后台传递对象和对象数组,上面的代码传递的是对象数组,修改data:{ObjectUser:JSON.stringify()}括号里的值即可实现切换,不赘述。另外,这个ObjectUser是传到后台的一个名字,后台可以用request.getParameter("ObjectUser")来接受,也可以直接给要接受的函数加一个注解参数:
@RequestParam String ObjectUser
后台controller:
//接收前台向后台传值
@RequestMapping("getdata")
@ResponseBody
public Object getdata(@RequestParam String ObjectUser){
//System.out.println(1);
JSONObject userObject=JSONObject.fromObject(ObjectUser);
//System.out.println(1);
User user=(User)userObject.toBean(userObject,User.class);
System.out.println(user.getUsername()+user.getPassword());
return "success";
}
@RequestMapping("getdata1")
@ResponseBody
public Object getdata1(@RequestParam String ObjectUser){
JSONArray userObject=JSONArray .fromObject(ObjectUser);
for(int i=0;i<userObject.size();i++)
{
User user=(User)userObject.getJSONObject(i).toBean(userObject.getJSONObject(i),User.class);
System.out.println(user.getUsername()+user.getPassword());
}
return "success";
}
分别对应着接收对象和对象数组的函数。
测试一下:
地址栏输入localhost:8080/index
输入用户名和密码:haha 123456
后台显示:
成功,完事。
细节提示:
前台ajax里的datatype设置为text才能读取到后台传入的success的字符串格式,才能进行跳转;
后台涉及到ajax的函数,不要忘了@RequestBody,这样才能进行json的传输,另外函数的返回值不能是String,否则返回的是success.jsp的html代码