带你学习JQuery:Struts2+Json+JQuery-优快云博客

本文链接：https://blog.youkuaiyun.com/hitxueliang/article/details/6785251

本文介绍使用JQuery Ajax实现的简单登录示例，包括表单验证、Ajax提交及Struts2处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

曾经使用过原生态的Ajax实现异步通信，自从接触了JQuery，也就渐渐地抛弃了原来的，因为JQuery的确很简单，今天就哪一个简单的登录来说明一下

整体的内容如下图：

要实现的事情：

（1）信息验证：在登录前验证表单的信息的格式的正确性，在这里我的表单有三个提交的内容，账号，邮箱、密码

（2）提交：提交信息后，验证用户是否存在

所用插件：Struts2.1 +jquery.1.3.1.js+jquery.validate.js+json-lib-2.4.jdbl5.jar

首先，提交前的验证

在这个测试程序里我使用了jquery.validate.js这个验证的插件很好用

用法代码如下（相信能看懂，我就不介绍了）：

如果真不懂，可以给我留言，我会写一个关于验证的博文

</script>
</head>

<body>
<div id="testDiv">
<form id="AjaxForm">
<fieldset>
<legend>账号信息：</legend>
<p>
<label for="username">账号：</label><em>*</em><input type="text" id="username" name="username">
</p>
<p>
<label for="email">Email：</label><em>*</em><input type="text" id="email" name="email">
</p>
<p>
<label for="password">密码：</label><em>*</em> <input type="text" id="password" name="password">
</p>
<p>
<input type="button" id="sub" name="sub" value="登陆">
</p>
</fieldset>
</form>
</div>
<div id="testDiv1">
</div>
</body>
</html>

验证过了，就是使用ajax方法了

$.ajax({
   type:"post",//传递方式，默认的时get
   dataType:"json",//返回参数类型，一般使用的有xml,html ,json
   data:$("#AjaxForm").serialize(),//传递的参数，这里用了简单的方法，serialize(),这是一个很省事的方法
   url:"jsonUser",//提交到那个Action
   success:function(data){                    //提交成功后的处理方法，data就是返回数据
    $("#testDiv1").html(data.result);
   }
   });
   })})

struts文件的配置：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="testJson" extends="json-default">
<action name="jsonUser" class="Mytest" method="Test1">
<result type="json"/>
</action>
</package>
</struts>

接下来的我想也是大家关心的，就是Action的内容了，怎么写那，其实很简单的

import com.opensymphony.xwork2.ActionSupport;
public class Mytest extends ActionSupport {
private String username;//接收的参数
private String email;//接收的参数
private String password;//接收的参数
private String result; //返回的结果

public String getResult() {
return result;
}

public void setResult(String result) {
this.result = result;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String Test1()
{
  System.out.println("===============================");
  System.out.println(username);
  System.out.println(email);
  System.out.println(password);
  if(username.equals("xueliang")&&password.equals("xueliang"))
  {
   result="登陆成功";
  }
  else{
   result="用户名不存在";
  }
  return "success";
}
}

这样就OK了，当然，我还是把index.jsp 的代码也贴出来吧

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
    <script src="<%=basePath%>/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script src="<%=basePath%>/scripts/jquery.validate.js" type="text/javascript"></script>
    <style type="text/css">
  * { font-family: Verdana; font-size: 96%; }
  label { width: 10em; float: left; }
  label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  p { clear: both; }
  .submit { margin-left: 12em; }

  em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  em.error {
    background:url("<%=basePath%>/images/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
  }
  em.success {
    background:url("<%=basePath%>/images/checked.gif") no-repeat 0px 0px;
    padding-left: 16px;
  }
     </style>
<script type="text/javascript">
$(function(){
$("#AjaxForm").validate({
  rules: {
   username: {
    required: true,
    minlength: 2
   },
   email: {
    required: true,
    email: true
   },
   password:{
   required:true,
   minlength:3
   }
  },

  messages: {
   username: {
    required: '请输入姓名',
    minlength: '请至少输入两个字符'
   },
   email: {
    required: '请输入电子邮件',
    email: '请检查电子邮件的格式'
   },
   password: {
   required:'请输入密码',
   minlength:'至少3位'

   }

  },

  errorElement: "em", //可以用其他标签，记住把样式也对应修改
  success: function(label) {
   //label指向上面那个错误提示信息标签em
   label.text(" ")    //清空错误提示消息
    .addClass("success"); //加上自定义的success类
  }
   });
   $("#sub").click(function(){
   $.ajax({
   type:"post",
   dataType:"json",
   data:$("#AjaxForm").serialize(),
   url:"jsonUser",
   success:function(data){
    $("#testDiv1").html(data.result);
   }
   });
   })})
</script>
</head>

<body>
<div id="testDiv">
<form id="AjaxForm">
<fieldset>
<legend>账号信息：</legend>
<p>
<label for="username">账号：</label><em>*</em><input type="text" id="username" name="username">
</p>
<p>
      <label for="email">Email：</label><em>*</em><input type="text" id="email" name="email">
</p>
<p>
<label for="password">密码：</label><em>*</em> <input type="text" id="password" name="password">
</p>
<p>
<input type="button" id="sub" name="sub" value="登陆">
</p>
</fieldset>
</form>
</div>
<div id="testDiv1">
</div>
</body>
</html>