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

Fleur ·
更新时间:2024-09-21
· 750 次阅读

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>

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



AJAX easyui ajax提交

需要 登录 后方可回复, 如果你还没有账号请 注册新账号