史上最全的java从后台向前台jsp以及js传值的方法总结_后端传数据给前端_CtrlZ1的博客-程序员秘密

技术标签: java  前后台传值  json  model  ajax  

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41076797/article/details/84309315

智能推荐

跟牛老师一起学WEBGIS——GIS基础(地图学)_webgis地图 基础_牛老师讲GIS的博客-程序员秘密

2、地图学2.1 地图的主要特征1.地图信息的载体2.数学法则的结构3.有目的的地图概括经过分类、简化、夸张、符号化、模型化和概括方法,称为地图概括。5.符号系统的应用2.2 地图三要素地图是认识和分析研究客观世界的常用手段,尽管地图的表现形式发生了种种变化,但是依然可以认为构成地图的主要因素有三:地图图形、数学要素和辅助要素。1.地图图形用地图符号所表示的制图区域内,各种自然和社会经济现象的分布、联系以及时间变化等的内容部分(又称地理要素)。2.数学要素数学要素是决定图形分布位置和

PTA 7-1 球队“食物链” (30 分)_pta 球队食物链_scypreferhjh的博客-程序员秘密

7-1 球队“食物链” (30 分)某国的足球联赛中有N支参赛球队,编号从1至N。联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场。联赛战罢,结果已经尘埃落定。此时,联赛主席突发奇想,希望从中找出一条包含所有球队的“食物链”,来说明联赛的精彩程度。“食物链”为一个1至N的排列{ T​1​​ T​2​​ ⋯ T​N​​ },满足:球队T​1​​ 战胜过球队T​2​​ ,球队T​2​​ 战胜过球队T​3​​ ,⋯,球队T​(N−1)​​ 战胜过球队T​N

stm32f103 IIC控制器 卡在while(!I2C_CheckEvent(I2C2, I2C_EVENT_MASTER_MODE_SELECT));_硬件iic存储时卡死在while_DawnRayYang的博客-程序员秘密

使用stm32f103+rt-thread1.1.0使用硬件IIC控制器应该是官方的i2c_ee代码 读取24LC02的不挂总线直接测试的时候会卡死在while(!I2C_CheckEvent(I2C2, I2C_EVENT_MASTER_MODE_SELECT));这句话上挂上总线,将I2C1的PB6 PB7外接上拉电阻拉高之后,打开#define RT_USING_I2

::GetCommandLine()获取的值与CWinApp::m_lpCmdLine不同之处_ccfxue的博客-程序员秘密

调试了几天程序,原来从子进程中CWinApp::m_lpCmdLine是无法获取主进程通过CreateProcess传给子进程的命令行参数(一直为空),但通过ShellExcute传进的命令行参数则可以获取到.      总结: 主进程中函数CreateProcess和ShellExcute传给子进程的命令行参数,在子进程中均可以::GetCommandLine()获取,但CWinApp:

java treemap用法_java中的TreeMap类使用实例解析_折杨柳垂杨浮绿水的博客-程序员秘密

使用TreeMap类TreeMap类不仅实现了Map接口,还实现了Map接口的子接口java.util.SortedMap。由TreeMap类实现的Map集合,不允许键对象为null,因为集合中的映射关系是根据键对象按照一定顺序排列的,TreeMap类通过实现SortedMap接口得到的方法如表1所示。 表1TreeMap类通过实现java.util.SortedMap接口得到的方法在添加、删除和...

随便推点

PyCharm激活【长期有效】_如何查看pycharm专业版是否激活_BabaloveU的博客-程序员秘密

破解补丁激活到期时间为2099年,基本为永久啦下载 https://pan.baidu.com/s/1GehNMTXagUxUEted1DT-Pg 密码:6689 并将 JetbrainsCrack-3.1-release-enc.jar 放置到 pycharm安装目录的\bin目录下(位置可随意,只要配置文件填写相对应的路径)。                              ...

Node sass 切换成Dart Sass_"sass\": \"^1.49.9\","_小菜101的博客-程序员秘密

参照:链接注意:安装了sass后,sass-laoder的版本不能太高,否则会报Syntax Error: TypeError: this.getOptions is not a function我的版本对应关系如下:“sass”: “^1.49.9”,“sass-loader”: “^7.1.0”,

MPO与MTP光纤连接标准的区别_撞强的博客-程序员秘密

http://network.chinabyte.com/452/13287452.shtml随着数据中心的快速发展,云计算,云存储等应用逐渐渗透各个行业,网络通信的带宽要求也随之迅猛增加,而高速高容量高带宽往往需要更大的空间更高的成本,这存在这长期矛盾,MTP/MPO光纤配线标准则成为了目前高密度高带宽的最佳解决方案。当今市面上存在MTP和MPO两种光纤连接系统,它们非常相似,在一定

人大金仓数据库不支持unix_timestamp函数_默默搬砖路的博客-程序员秘密

人大金仓数据库是不包含unix_timestamp这个函数的在数据库模式为orcale的情况下,执行下面代码,就能够支持函数了。CREATE OR REPLACE FUNCTION unix_timestamp(time_val timestamp with time zone) RETURNS integerAS DECLARE Unix integer;BEGIN select extract(epoch from time_val::timestamp at time zone 'P

HDOJ2571 DP入门题(DP+DFS)_老年退役选手的博客-程序员秘密

命运Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 20325 Accepted Submission(s): 7081Problem Description 穿过幽谷意味着离大魔王lemon已经无限接近了! 可谁能想到,yif

《TCP/IP详解 卷1:协议》学习笔记(未完待续)_tcpip详解卷一_chinalihuanyu的博客-程序员秘密

从书籍摘录,加上了自己的经验,仅用于学习,如有侵权请联系删除。

推荐文章

热门文章

相关标签