史上最全的java从后台向前台jsp以及js传值的方法总结

本文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代码