首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

EasyUI框架 使用Ajax提交注册信息的实现代码

Posted in Javascript onSeptember 27, 2017

EasyUI框架 使用Ajax提交注册信息的实现代码

一、服务器代码：

@Controller
@Scope("prototype")
public class StudentAction extends BaseAction<Student> {
  private static final long serialVersionUID = -2612140283476148779L;

  private Logger logger = Logger.getLogger(StudentAction.class);
  private String rows;// 每页显示的记录数
  private String page;// 当前第几页
  private Map<String, Object> josnMap = new HashMap<>();

  // 查询出所有学生信息
  public String list() throws Exception {
    return "list";
  }

  public String regUI() throws Exception {
    return "regUI";
  }

  // 查询出所有学生信息
  public String listContent() throws Exception {
    List<Student> list = studentService.getStudentList(page, rows);
    System.out.println("list==" + list);
    toBeJson(list, studentService.getStudentTotal());
    return "toJson";
  }

  // 转化为Json格式
  public void toBeJson(List<Student> list, int total) throws Exception {
    josnMap.put("total", total);
    josnMap.put("rows", list);
    JSONParser.writeJson(josnMap);// 自定义的工具类
  }

  public String reg(){
    logger.error("kkk");
    try {
      studentService.save(model);
      josnMap.put("success", true);
      josnMap.put("msg", "注册成功!");
    } catch (Exception e) {
      e.printStackTrace();
      josnMap.put("success", false);
      josnMap.put("msg", "注册失败!");
    }
    try {
      ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
      ServletActionContext.getResponse().setCharacterEncoding("utf-8");
      ServletActionContext.getResponse().getWriter().print(JSON.toJSONString(josnMap));
    } catch (IOException e) {
      e.printStackTrace();
    }

    return "toJson";
  }

  public void setRows(String rows) {
    this.rows = rows;
  }

  public void setPage(String page) {
    this.page = page;
  }

  public Map<String, Object> getJosnMap() {
    return josnMap;
  }

  public void setJosnMap(Map<String, Object> josnMap) {
    this.josnMap = josnMap;
  }



}

二、BaseAction代码：

import java.lang.reflect.ParameterizedType;

import javax.annotation.Resource;

import org.apache.struts2.ServletActionContext;

import cn.oppo.oa.service.DepartmentService;
import cn.oppo.oa.service.ForumService;
import cn.oppo.oa.service.PrivilegeService;
import cn.oppo.oa.service.RoleService;
import cn.oppo.oa.service.StudentService;
import cn.oppo.oa.service.UserService;

import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

public abstract class BaseAction<T> extends ActionSupport implements ModelDriven<T> {

  /**
   * 
   */
  private static final long serialVersionUID = 1L;
  @Resource
  protected RoleService roleService;
  @Resource
  protected DepartmentService departmentService;
  @Resource
  protected UserService userService;
  @Resource
  protected PrivilegeService privilegeService;

  @Resource
  protected ForumService forumService;

  @Resource
  protected StudentService studentService;

  protected T model;

  @SuppressWarnings("unchecked")
  public BaseAction() {
    try {
      // 得到model的类型信息
      ParameterizedType pt = (ParameterizedType) this.getClass().getGenericSuperclass();
      Class<T> clazz = (Class<T>) pt.getActualTypeArguments()[0];

      // 通过反射生成model的实例
      model = (T) clazz.newInstance();
    } catch (Exception e) {
      throw new RuntimeException(e);
    }
  }

  public void writeJson(Object object){
    try {
      String json = JSON.toJSONStringWithDateFormat(object, "yyyy-MM-dd HH:mm:ss");
      ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
      ServletActionContext.getResponse().setCharacterEncoding("utf-8");
      ServletActionContext.getResponse().getWriter().write(json);
      ServletActionContext.getResponse().getWriter().flush();
      ServletActionContext.getResponse().getWriter().close();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

  public T getModel() {
    return model;
  }
}

三、页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
  <title>EasyUI框架</title>
  <%@ include file="/WEB-INF/jsp/public/common.jspf" %>
  <script type="text/javascript">
     $(function(){
       if(${"#easyui_regForm"}.form('validate')){
         $.ajax({
           url:'${pageContext.request.contextPath}/student_reg.action',
           data:${"#easyui_regForm"}.serialize(),
           dataType:'json',
           success:function(obj,status,jqXHR){
             if(obj.success){
               $("#easyui_regDialog").dialog('close');
             }
             $.message.show({
              title:'提示',
              msg:obj.msg
             });
           }
         });
       }else{
         alert('验证失败');
       }
    }); 
  </script>
</head>
<body class="easyui-layout">
  <div data-options="region:'north',split:true" style="height:100px;">aa</div>
  <!-- <div data-options="region:'south',split:true" style="height:100px;">bb</div>-->
  <div data-options="region:'east',title:'East',split:true" style="width:200px;">cc</div> 
  <div data-options="region:'west',title:'West',split:true" style="width:200px;">dd</div>
  <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">kk</div>

  <div class="easyui-dialog" data-options="title:'登陆', modal:true,
      closable:false,
      toolbar:[{
        text:'Edit',
        iconCls:'icon-edit',
        handler:function(){alert('edit')}
      },{
        text:'Help',
        iconCls:'icon-help',
        handler:function(){alert('help')}
      }],
      buttons:[{
        text:'登陆',
        handler:function(){alert('登陆')}
      },{
        text:'注册',
        handler:function(){
          $('#easyui_regForm input').val('');
          $('#easyui_regDialog').dialog('open');
        }
      }]" >
    <table>
      <tr>
        <td>登陆名称：</td>
        <td><input type="text" name="name"/></td>
      </tr>
      <tr>
        <td>登陆密码：</td>
        <td><input type="password" name="password"/></td>
      </tr>
    </table>
  </div>

  <div id="easyui_regDialog" class="easyui-dialog" data-options="title:'注册', modal:true,
      closable:true,
      closed:true,
      buttons:[{
        text:'注册',
        handler:function(){
          $('#easyui_regForm').form('submit',{
          url : '${pageContext.request.contextPath}/student_reg.action',
          success : function(data) {
            var obj = jQuery.parseJSON(data);
            if (obj.success) {
              $('#easyui_regDialog').dialog('close');
            }
            $.messager.show({
              title : '提示',
              msg : obj.msg
            });
          }
      });
        }
      },{
        text:'取消',
        handler:function(){alert('注册')}
      }]" >
    <form id="easyui_regForm" method="post">
    <table>
      <tr>
        <td>登陆名称：</td>
        <td><input type="text" name="loginName" class="easyui-validatebox" data-options="required:true,missingMessage:'用户名称不能为空'"/></td>
      </tr>
      <tr>
        <td>登陆密码：</td>
        <td><input id="reg_pwd" type="password" name="password" class="easyui-validatebox" data-options="required:true,missingMessage:'用户密码不能为空'"/></td>
      </tr>
      <tr>
        <td>确定密码：</td>
        <td><input type="password" name="repassword" class="easyui-validatebox" data-options="required:true,missingMessage:'确认密码不能为空',validType:'equals[\'#reg_pwd\']'" /></td>
      </tr>
    </table>
    </form>
  </div>
</body>
</html>

四、struts2.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>
  <!-- 配置为开发模式 -->
  <constant name="struts.devMode" value="true" />
  <!-- 配置扩展名为action -->
  <constant name="struts.action.extension" value="action" />
  <!-- 配置主题 -->
  <constant name="struts.ui.theme" value="simple" />

  <package name="default" namespace="/" extends="json-default">

    <interceptors>
      <!-- 声明一个拦截器 -->
      <interceptor name="checkePrivilege" class="cn.oppo.oa.interceptor.CheckPrivilegeInterceptor"></interceptor>

      <!-- 重新定义defaultStack拦截器栈，需要先判断权限 -->
      <interceptor-stack name="defaultStack">
        <interceptor-ref name="checkePrivilege" />
        <interceptor-ref name="defaultStack" />
      </interceptor-stack>
    </interceptors>


    <!-- 配置全局的Result -->
    <global-results>
      <result name="loginUI">/WEB-INF/jsp/user/loginUI.jsp</result>
      <result name="noPrivilegeError">/noPrivilegeError.jsp</result>
    </global-results>


    <!-- 测试用的action，当与Spring整合后，class属性写的就是Spring中bean的名称 -->
    <action name="test" class="testAction">
      <result name="success">/test.jsp</result>
    </action>


    <action name="*_*" class="{1}Action" method="{2}">
      <result name="{2}">/WEB-INF/jsp/{1}/{2}.jsp</result>
      <!-- 跳转到添加与修改页面 -->
      <result name="saveUI">/WEB-INF/jsp/{1}/saveUI.jsp</result>
      <!-- 返回list页 -->
      <result name="toList" type="redirectAction">{1}_list?parentId=${parentId}</result>
      <!-- 返回主页 -->
      <result name="toIndex" type="redirect">/index.jsp</result>
      <!-- 返回论坛主题 -->
      <result name="toShow" type="redirectAction">topic_show?id=${id}</result>
      <result name="toTopicShow" type="redirectAction">topic_show?id=${topicId}</result>
      <!-- json解析 -->
      <result name="toJson" type="json">
        <param name="root">josnMap</param>
      </result>

      <result name="reg">/easyui.jsp</result>


    </action>

  </package>

</struts>

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

EasyUI框架 使用Ajax提交注册信息的实现代码

- Author -

CharlinGod

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 #Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 #Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 #Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 #Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 #Javascript
callback(1) RTX 3050 ti(1) cudnn(1) cudn(1) dict(1) 字符画(1) 热力图(1) webpack(1) 脚本(1) Git(3)
You might like
PHP在线生成二维码代码(google api)
2013/06/03 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
Angular实现form自动布局
2016/01/28 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
vue组件间通信解析
2017/03/01 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python多线程同步实例教程
2019/08/11 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
德国、奥地利和瑞士最大的旅行和度假门户网站：HolidayCheck
2019/11/14 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
SQL写法--行行比较
2021/08/23 SQL Server