ssh中与前端的json数据交换

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

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

ssh中与前端的json数据交换

准备工作

  1. 已经搭建好的ssh框架,包括action配置,spring配置,hibernate配置以及事务等配置。
  2. 前端jQuery框架js代码。
  3. 后台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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值