Exemple détaillé du framework EasyUI utilisant Ajax pour soumettre les informations d'enregistrement-js tutoriel-php.cn

Exemple détaillé du framework EasyUI utilisant Ajax pour soumettre les informations d'enregistrement

小云云

Libérer： 2017-12-27 10:26:54

original

1914 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur le code d'implémentation du framework EasyUI utilisant Ajax pour soumettre les informations d'enregistrement. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin pourront s'y référer.

Le framework EasyUI utilise Ajax pour soumettre le code de mise en œuvre des informations d'enregistrement

1. Code du serveur :

@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;
  }



}

Copier après la connexion

2. Code 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;
  }
}

Copier après la connexion

3. Code de page :

<%@ 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(&#39;validate&#39;)){
         $.ajax({
           url:&#39;${pageContext.request.contextPath}/student_reg.action&#39;,
           data:${"#easyui_regForm"}.serialize(),
           dataType:&#39;json&#39;,
           success:function(obj,status,jqXHR){
             if(obj.success){
               $("#easyui_regDialog").dialog(&#39;close&#39;);
             }
             $.message.show({
              title:&#39;提示&#39;,
              msg:obj.msg
             });
           }
         });
       }else{
         alert(&#39;验证失败&#39;);
       }
    }); 
  </script>
</head>
<body class="easyui-layout">
  <p data-options="region:&#39;north&#39;,split:true" style="height:100px;">aa</p>
  <!-- <p data-options="region:&#39;south&#39;,split:true" style="height:100px;">bb</p>-->
  <p data-options="region:&#39;east&#39;,title:&#39;East&#39;,split:true" style="width:200px;">cc</p> 
  <p data-options="region:&#39;west&#39;,title:&#39;West&#39;,split:true" style="width:200px;">dd</p>
  <p data-options="region:&#39;center&#39;,title:&#39;center title&#39;" style="padding:5px;background:#eee;">kk</p>

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

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

Copier après la connexion

4. Configuration 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>

Copier après la connexion

Recommandations associées :

Informations d'enregistrement de l'utilisateur PHP à l'aide d'un exemple de code de vérification d'expression régulière

PHP vérifie si les informations d'enregistrement de l'utilisateur sont légales_Tutoriel PHP

Barre de navigation + informations d'inscription_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Exemple détaillé du framework EasyUI utilisant Ajax pour soumettre les informations d'enregistrement