zoukankan      html  css  js  c++  java
  • 转:struts2+jquery+json集成(一)

    转:http://www.cnblogs.com/linjiqin/archive/2011/03/19/1989169.html

    以下采用struts2+jquery+json模拟一个案例。当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示。

    效果如下:

     

             

    接下来为struts2+jquery+json集成步骤:

    1、新建一个web工程,导入struts2+jquery+json所需jar,如下图

    目录结构图

              

    2、创建实体类User

    复制代码
    package com.ljq.bean;

    import java.io.Serializable;

    @SuppressWarnings(
    "serial")
    publicclass User implements Serializable {
    privateint id;
    private String username;
    private String pwd;

    public User() {
    }

    public User(int id, String username, String pwd) {
    super();
    this.id = id;
    this.username = username;
    this.pwd = pwd;
    }

    publicint getId() {
    return id;
    }

    publicvoid setId(int id) {
    this.id = id;
    }

    public String getUsername() {
    return username;
    }

    publicvoid setUsername(String username) {
    this.username = username;
    }

    public String getPwd() {
    return pwd;
    }

    publicvoid setPwd(String pwd) {
    this.pwd = pwd;
    }

    }
    复制代码

            

    3、新建Action JsonAction

    复制代码
    package com.ljq.action;

    import net.sf.json.JSONObject;

    import com.ljq.bean.User;
    import com.opensymphony.xwork2.ActionSupport;

    @SuppressWarnings(
    "serial")
    publicclass JsonAction extends ActionSupport{
    private User user;
    // 返回结果给客户端
    private String result;

    @Override
    public String execute() throws Exception {
    //将要返回的实体对象进行json处理
    JSONObject json=JSONObject.fromObject(user);
    //输出格式如:{"id":1, "username":"zhangsan", "pwd":"123"}
    System.out.println(json);
    result
    =json.toString();
    return SUCCESS;
    }

    public User getUser() {
    return user;
    }

    publicvoid setUser(User user) {
    this.user = user;
    }

    public String getResult() {
    return result;
    }

    publicvoid setResult(String result) {
    this.result = result;
    }

    }
    复制代码

               

    4、建立struts.xml文件

    复制代码
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
    <struts>
    <!-- 该属性指定需要Struts2处理的请求后缀,该属性的默认值是action,即所有匹配*.action的请求都由Struts2处理。
    如果用户需要指定多个请求后缀,则多个后缀之间以英文逗号(,)隔开。
    -->
    <constant name="struts.action.extension" value="do"/>
    <!-- 设置浏览器是否缓存静态内容,默认值为true(生产环境下使用),开发阶段最好关闭 -->
    <constant name="struts.serve.static.browserCache" value="false"/>
    <!-- 当struts的配置文件修改后,系统是否自动重新加载该文件,默认值为false(生产环境下使用),开发阶段最好打开 -->
    <constant name="struts.configuration.xml.reload" value="true"/>
    <!-- 开发模式下使用,这样可以打印出更详细的错误信息 -->
    <constant name="struts.devMode" value="true"/>
    <!-- 默认的视图主题 -->
    <!--<constant name="struts.ui.theme" value="simple"/>-->
    <!--<constant name="struts.objectFactory" value="spring"/>-->


    <package name="test"extends="json-default">
    <action name="jsonAction"class="com.ljq.action.JsonAction">
    <result type="json">
    <!-- 此处将reslut的值返回给客户端,root的值对应要返回的值的属性result
    注意:root为固定写法,否则不会把result的值返回给客户端
    -->
    <param name="root">result</param>
    </result>
    </action>
    </package>


    </struts>
    复制代码

           

    5、编写index.jsp文件

    复制代码
    <%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
    <%@taglib uri="/struts-tags" prefix="s"%>
    <%
    String path
    = request.getContextPath();
    String basePath
    = request.getScheme() +"://"
    + request.getServerName() +":"+ request.getServerPort()
    + path +"/";
    %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/index.js"></script>
    <!--<s:head theme="ajax"/>这句话好像没影响哦 -->
    <!--<s:head theme="ajax"/>-->
    <!--在jsp页面上加入<s:head theme="ajax"/>会报如下异常:java.io.FileNotFoundException:
    Template
    /template/ajax/head.ftl not found.
    解决办法:在struts2
    -core-2.1.8.jar/template目录下加入ajax文件夹,ajax文件夹所在目录为
    struts2
    -core-2.1.8.jar/template/archive。
    注意:ajax文件夹下要包含head.ftl,否则还是会抛异常。head.ftl请在template目录搜索然后放到ajax文件夹里
    -->
    </head>

    <body>
    <!-- 显示User实体对象 -->
    <div id="result"></div>
    <s:form name="userForm" action="/jsonAction.do" method="post">
    编号:
    <input name="user.id"/><br/>
    用户名:
    <input name="user.username"/><br/>
    密码:
    <input name="user.pwd"/><br/><br/>
    <input id="btn" type="button" value=" 提 交 "/>
    </s:form>

    </body>
    </html>
    复制代码

            

    6、建立文件index.js

    复制代码
    $(document).ready(function(){
    //点击提交按钮时,从服务端获取数据,然后在客户端显示
    $("#btn").click(function(){
    // 序列化表单的值
    var params=$("input").serialize();
    $.ajax({
    url:
    "jsonAction.do",
    // 数据发送方式
    type: "post",
    // 接受数据格式
    dataType : "json",
    // 要传递的数据
    data : params,
    // 回调函数,接受服务器端返回给客户端的值,即result值
    success : show
    });
    });
    });

    function show(result){
    //测试result是否从服务器端返回给客户端
    //alert(result);
    //解析json对象
    var json = eval("("+result+")");
    var obj
    ="编号: "+json.id+" 用户名: "+json.username+" 密码: "+json.pwd;
    $(
    "#result").html(obj);
    }
  • 相关阅读:
    java实现第七届蓝桥杯方格填数
    java实现第七届蓝桥杯方格填数
    Java实现第八届蓝桥杯正则问题
    Java实现第八届蓝桥杯正则问题
    手把手教你用Mysql-Cluster-7.5搭建数据库集群
    MySQL集群---②Windows平台搭建MySQL CLUSTER集群
    mysql集群搭建教程-基础篇
    Mysql多实例的配置和管理
    MySQL 使用mysqld_multi部署单机多实例详细过程
    [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试
  • 原文地址:https://www.cnblogs.com/wangle1001986/p/2649664.html
Copyright © 2011-2022 走看看