EasyUI框架 使用Ajax提交注册信息的实现代码
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等框架时的Json-lib的处理方案
无论是使用ajax还是使用easyui等框架,后台向前台输出数据时都涉及到json处理的问题,这里介绍两种处理方法,第一种是手动配置json的处理方法,另一种使用json-lib的处理方案.普通手动配置方法比较笨拙,每次需要根据字段名逐个配置,因此也无法再其他对象上使用,降低了代码的重用性,使用json-lib工具可以实现自动处理,针对不同的对象又不同的处理措施,大大提高了处理效率和代码的重用性,以下分别根据案例介绍两种方法的过程: 方法一:普通方法,通过手动配置转型的过程,以easyui的请求
-
jquery easyUI中ajax异步校验用户名
以前无聊写过一个小东西,其中有一个功能就是添加用户,当时并没有考虑用户名重复的问题,今日闲来无事,打算利用ajax的异步刷新来校验用户名是否存在.自己也是新手,刚刚大三,哈哈写的不对的地方请指出. 放上效果图: 首先是编写前的准备 我并不是用原生的js来写的ajax而是用的jqueryeasyUI框架中的ajax,所以在使用之前就必须要引入jquery的js文件. <link rel="stylesheet" type="text/css" href=&quo
-
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件.提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对. 文件上传框我们定义如下: <input class="easyui-filebox" id="image" name="image" data-options="label:'产品图片:',buttonText:
-
EasyUI框架 使用Ajax提交注册信息的实现代码
EasyUI框架 使用Ajax提交注册信息的实现代码 一.服务器代码: @Controller @Scope("prototype") public class StudentAction extends BaseAction<Student> { private static final long serialVersionUID = -2612140283476148779L; private Logger logger = Logger.getLogger(Stude
-
通过正则表达式使用ajax检验注册信息功能
本期博客内容应该不算多,我们此次的目的是通过正则表达式并利用ajax可以实现动态交互的特点,检验注册的用户名以及密码是否合法. Entity层 该层主要包含一个用户类User,代码如下: package cn.cpx.springmvc.entity; import java.util.Date; /** * 用户实体类 * @author autumn_leaf * */ public class User { private int uId; private String uName; pr
-
Flask框架运用Ajax实现数据交互的示例代码
目录 前后端发送字符串 前后端发送JSON数据 发送数据并携带token 收发JSON格式字符串 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
使用spring oauth2框架获取当前登录用户信息的实现代码
使用spring oauth2框架做授权鉴定.想获取当前用户信息怎么办? 我们知道spring oauth2是基于spring security的实现的. spring security可以通过SecurityContextHolder.getContext().getAuthentication().getPrincipal()获取到当前用户信息. 而spring oauth2通过SecurityContextHolder.getContext().getAuthentication().ge
-
ajax无刷新验证注册信息示例
ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确.错误的信息显示 3.不用submit提交按钮,直接用button 如图: 二.把ajax做成一个函数,通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了. 2.ajax函数需要三个参数,url,jsonData,getMsg.这里的url都是regProc
-
Node.js获取前端ajax提交的request信息
今天看一下Node.js怎么获取ajax提交的request 信息 众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息 下面我贴一下前端的代码 index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求 主要贴一下js页面的代码 $("button").on("click",function(){
-
Ajax提交表单并接收json实例代码
需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com
-
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码. HTML的代码: <form id="ff" runat="server" method="post"> <div id="content" style="margin-left:50px;"> <table style="width:300px;" id=&quo
-
jquery实现ajax提交表单信息的简单方法(推荐)
最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:
-
Lavarel框架中使用ajax提交表单的方法
laravel简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力."开发"应当是一项富有创造性的脑力劳动,而不是枯燥的"垒代码". 开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加. 在网上看了很多的解决方式