ssh中与前端的json数据交换

最新推荐文章于 2021-11-11 11:31:27 发布

WaveBridge

最新推荐文章于 2021-11-11 11:31:27 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ssh框架文章标签： ssh json 前后台数据交换 struts2 ajax

本文链接：https://blog.youkuaiyun.com/WaveBridge/article/details/76397090

ssh框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在SSH框架中实现与前端的JSON数据交换。首先，确保SSH框架配置完整，包括action、spring和hibernate的配置。然后，引入jQuery库和后台所需的JSON处理jar包。在Action层面进行相应配置，最后通过前端的Ajax技术发送和接收JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ssh中与前端的json数据交换

准备工作

已经搭建好的ssh框架，包括action配置，spring配置,hibernate配置以及事务等配置。
前端jQuery框架js代码。
后台json的jar包。（我是在链接中下载的）使用Jquery JSON所需 jar包

action

    package cn.pecrp.action;
    import java.io.IOException;
    import java.io.PrintWriter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    import com.opensymphony.xwork2.ActionSupport;
    import cn.pecrp.service.UserService;
    import net.sf.json.JSONObject;

    public class UserAction extends ActionSupport {

        //通过spring注入对象
        private UserService userService;
        public void setUserService(UserService userService) {
            this.userService = userService;
        }

        //用户登录
        public String login() throws IOException {
            System.out.println("login...action...");

            //获得request和response对象
            HttpServletRequest request = ServletActionContext.getRequest();
            System.out.println("username" + request.getParameter("username"));
            System.out.println("password" + request.getParameter("password"))；
            HttpServletResponse response = ServletActionContext.getResponse();

            //设置response输出json便于调试
            response.setContentType("application/json;charset=utf-8");
            response.setHeader("Access-Control-Allow-Origin", "*");
            PrintWriter out;

            try{    
                String username = request.getParameter("username");
                String password = request.getParameter("password");

                //尝试登录
                boolean flag = userService.login(username,password);

                out = response.getWriter();
                JSONObject json = new JSONObject();

                //登录失败返回0   成功返回1
                if(flag == false) {
                    json.put("msg", "0");
                } else {
                    json.put("msg", "1");
                }

                out.write(json.toString());
                out.flush();
                out.close();

            } catch (Exception e) {
                e.printStackTrace();
            }   
            return null;
        }
    }

action的配置文件

    <struts>
        <constant name="struts.il8n.encoding" value="UTF-8" />

        <!-- 注意使用的包不是struts-default 而是json-default -->
        <package name="myPackage" namespace="/" extends="json-default">     
            <action name="*Action" class = "userAction" method="{1}">
            </action>
        </package>
    </struts>

前台ajax

注意此前端并非与上面后台代码对应！！！仅提供数据发送和接受方式

    <!DOCTYPE html>
    <html>
    <head>
    <title>登录</title>
    <meta charset="utf-8">
    <script src="/PECRP/jquery1.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn").click(function() {

                $.ajax({
                    url : "loginAction",   //这个就是填相应的action
                    type : "POST",         //数据发送方式
                    dataType : "json",     // 接受数据格式

                    // 要传递的数据
                    data : {
                        username:'usernameValue',   
                        password:'passwordValue'
                    },

                    // 回调函数，接受服务器端返回给客户端的值，即result值
                    success : function(data) {      //后台传回json
                        var json = eval(data);      //解析json
                        var data = "";
                        alert(json.name + " " + json.age);
                        window.location.href='index.html';    //跳转页面
                    }

                });
            });
        });

    </script>
    </head>
    <body>
        <form id="form1">
            用户名：<input type="text" name="username"><br /> 
            密&nbsp;&nbsp;码：<input type="text" name="password"><br /> 
            <input type="button" id = "btn" value="登录" >
        </form>
    </body>
    </html>