首页
所有分类
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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
各种常用的JS函数整理
Oct 25 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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
中波(3) SWL(1) FM(4) Harman Kardon(1) GWEN(1) KDKA(1) 调频(4) 电台频率(32) ad hoc(1) 立体声(1)
You might like
PHP的历史和优缺点
2006/10/09 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Python+PIL实现支付宝AR红包
2018/02/09 Python
python按比例随机切分数据的实现
2019/07/11 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Django如何重置migration的几种情景
2021/02/24 Python
Clarins娇韵诗美国官网：法国天然护肤品牌
2016/09/26 全球购物
BIBLOO捷克：购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
工作简报怎么写
2015/07/21 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL