`
冷静
  • 浏览: 146050 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

Struts2 Jquery Json 实现AJax表单验证

AjaxjsonjQueryStrutsJavaEE 
阅读更多

弄了一整天了，刚开始学习Jquery，很多东西还不熟，看看视频，查查资料，终于成功的集成Struts2+Jquery+Json

直接上图:用户名输入xxx,焦点丢失，提示”用户已存在“，否则提示“可以注册“，密码同样如此,

 

 

首先需要导包：如下除了struts2必须的包外，还有json包以及涉及的commons的几个包.

 

此外要下载Jquery的js文件，然后部署到下图位置，当然位置可以任意，

 

 

之后就开始我们的ajax之路吧

1.首先是index源代码：其中涉及Jquery的语法，自己去查api

 

      <%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
   #login {
      width:410px;
     
      margin:auto auto;
      margin-top:71px;
      background-color:gray;
   }
  #name {
    font-size:14px;
    color:red;
  }
  #pass{
   font-size:14px;
   color:red;
  }
  </style>
  <script type="text/javascript" src="Jquery/jquery-1.4.2.js"
   mce_src="Jquery/jquery-1.4.2.js"></script>
  <script type="text/javascript">  
    $(document).ready( function() {  
          
        //使用 Ajax 的方式 判断登录  
        $("#userName").blur( function() {  
              
            var url = 'login.action';  
              
           
              
            //获取表单值，并以json的数据形式保存到params中  
            var params = {  
                userName:$("#userName").val(),  
                password:$("#password").val(),  
            }  
            //使用$.post方式      
            $.post(  
              
                url,        //服务器要接受的url  
                  
                params,     //传递的参数       
                  
                function callback(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据  
                  
                    //alert(data);  
                    var member = eval("("+data+")");    //包数据解析为json 格式    
                    if(member.name=="yes"){
                    $('#name').html("用户已存在!");}
                    else{
                    $('#name').html("可以注册!");   
                        }  
                      
                },   
                  
                'json'  //数据传递的类型  json  
              
            );  
          
        });  
        $("#password").blur( function() {  
           
            var url = 'login.action';  
              
           
              
            //获取表单值，并以json的数据形式保存到params中  
            var params = {  
                loginName:$("#userName").val(),  
                password:$("#password").val(),  
            }  
            //使用$.post方式      
            $.post(  
              
                url,        //服务器要接受的url  
                  
                params,     //传递的参数       
                  
                function callback(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据  
                  
                    //alert(data);  
                    var member = eval("("+data+")");    //包数据解析为json 格式    
                    if(member.pass=="no"){
                    $('#pass').html("密码不正确!");}
                    else{
                    $('#pass').html("可以注册!");   
                        }  
                      
                },   
                  
                'json'  //数据传递的类型  json  
              
            );  
          
        });   
    });  
</script>
 </head>
 <body>
  <div id="login">
   <table>
    <tr>
     <td>
      <span>用户名：</span>
     </td>
     <td>
      <input type="text" id="userName" name="userName" style="width:170px;">
     </td>

     <td>
      <div>
       <span id="name"></span>
      </div>
     </td>
    </tr>
    <tr>
     <td>
      <span>密码：</span>
     </td>
     <td>
      <input type="password" name="password" id="password" style="width:170px;">
     </td>

     <td>
      <div>
       <span id="pass"></span>
      </div>
     </td>
    </tr>
    <tr>
     <td colspan="3">
      <input type="button"  value="注册" />
     </td>
    </tr>
   </table>
  </div>
 </body>
</html>


 2.然后就是我们的Action，具体位置如上图。

         package com.ajax.demo;  
 
import java.util.HashMap;  
import java.util.Map;  
 
import net.sf.json.JSONObject;  
 
import com.opensymphony.xwork2.ActionSupport;  
 
public class LoginAction extends ActionSupport {  
 
    // 用户Ajax返回数据  
    private String result;  
 
    // struts的属性驱动模式，自动填充页面的属性到这里  
    private String userName;  
    private String password;  
 
    @Override 
    public String execute() {  
 
        // 用一个Map存储数据  
        Map<String, String> map = new HashMap<String, String>();  
 
        // 为map添加一条数据,记录页面传过来userName 
        map.put("userName", this.userName);
  
        if("xxx".equals(userName)){
         map.put("name","yes");//如果用户名xxx则提示已存在,否则可以注册
        
        }else {
        
         map.put("name", "no");
        }
        if("xxx".equals(password)){
        
         map.put("pass","yes");//如果密码xxx则可以注册,否则密码不正确
        }else {
         map.put("pass", "no");
        }    
        // 将要返回的map对象进行json处理  
        JSONObject jo = JSONObject.fromObject(map);  
 
        // 调用json对象的toString方法转换为字符串然后赋值给result  
        this.result = jo.toString();  
       
 
        return SUCCESS;   }

 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 getPassword() {
  return password;
 }

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

3.我们必不可少的web.xml，相信大家都知道,

     <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
  <filter>
   <filter-name>struts2</filter-name>
   <filter-class>
    org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
   </filter-class>
  </filter>
  <filter-mapping>
   <filter-name>struts2</filter-name>
   <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter>
      <filter-name>struts-cleanup</filter-name>
      <filter-class>org.apache.struts2.dispatcher.ActionContextCleanUp</filter-class>
    </filter>
    <filter-mapping>
      <filter-name>struts-cleanup</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app> 
4.  接下来最后一步 我们的struts.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> 
 
    <package name="ajax" extends="json-default"> 
        <action name="login" class="com.ajax.demo.LoginAction"> 
 
            <!-- 返回类型为json 在sjon-default中定义 --> 
            <result type="json"> 
 
                <!-- root的值对应要返回的值的属性 --> 
                <!-- 这里的result值即是 对应action中的 result --> 
                <param name="root">result</param> 
            </result> 
        </action> 
    </package> 
 
</struts> 


OK,今天就写到这里了，可以睡觉了.明天继续java.

 

分享到：
| Digester
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    struts2+json+jquery实现ajax数据的存取

    "Struts2+JSON+jQuery实现Ajax数据的存取"就是一个典型的示例，它结合了强大的MVC框架Struts2、轻量级的数据交换格式JSON以及高效的前端库jQuery，以实现网页上的无刷新数据交互。下面将详细介绍这三个技术及其在...

    Struts2+Jquery+Ajax

    8. 实例演示：使用Struts2+Jquery+Ajax实现动态加载数据或表单验证 "struts2 jar"文件包含了Struts2框架的核心库，可能包括struts2-core、struts2-convention、struts2-json-plugin等依赖，这些是开发Struts2应用必...

    Struts2+JSON+JQuery实现简单的验证

    6. **实现JSON返回**：在Struts2 Action中，使用`ValueStack`或`ActionContext`将验证结果转化为JSON对象，然后设置结果类型为JSON，让Struts2自动处理JSON响应。 7. **测试**：启动Tomcat服务器，访问JSP页面，...

    Struts2JQueryJson

    Struts2JQueryJson是一个基于Struts2框架的项目，主要展示了如何在前端使用JQuery库来处理由后台返回的JSON格式数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也方便...

    struts2+jquery+json+ajax例子

    总结起来，"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作，实现一个无刷新的登录界面，提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证，jQuery和Ajax负责前后端的通信，JSON作为数据...

    Struts2 Jquery 实现Ajax无刷新验证用户名是否存在

    - 使用jQuery的`$.ajax()`或`$.getJSON()`方法发送异步请求，参数包括URL（指向Struts2 Action）、数据（通常是用户名）、回调函数等。 2. **Struts2 Action配置**： - 创建一个Struts2 Action类，比如`...

    Struts2 JQueryJson例子 .rar

    这个"Struts2 JQueryJson例子 .rar"压缩包很可能是包含了一个实际的项目实例，演示了如何在Struts2框架中利用JQuery和JSON进行数据交互。下面将详细讲解Struts2、JQuery和JSON的相关知识点： 1. **Struts2框架**： ...

    AJAX和struts2传递JSON数组

    总结来说，通过这种方式，我们可以利用AJAX向Struts2 Action传递JSON数组，实现异步数据交互。这在动态更新页面内容、处理表单提交等场景下非常有用。同时，使用JSON作为数据交换格式，使得前后端的数据交换变得更加...

    struts2+json+jquery实现ajax登录和注册功能

    ### Struts2、JSON与jQuery实现Ajax登录与注册功能详解 在现代Web开发中，实现高效、实时的用户交互已成为核心需求之一。Struts2框架以其强大的MVC架构能力，结合JSON数据交换标准以及jQuery库的灵活性，为构建动态...

    struts2 jquery json

    应用struts2 jquery json简单小例子。可编译，可执行，可看效果。注释很详细。包也很齐全。 1，表单提交。怎么来回传递值的（包括字符串，对象，集合），解析json。 2，ajax提交，操作字符串，对象，数组。

    struts2使用jquery整合ajax、json用户登录实例源码

    在本实例中，我们将探讨如何利用Struts2、jQuery、Ajax和JSON技术实现一个用户登录功能。 首先，我们需要理解Ajax的核心概念，即在不刷新整个页面的情况下，向服务器发送异步请求并获取数据。这极大地提升了用户...

    struts+jquery+json+ajax.pdf

    综上所述，这个例子展示了如何使用 Struts2 处理后端逻辑，通过 JSON 将数据传递给前端，然后利用 jQuery 和 AJAX 实现无刷新的交互体验。这种组合在现代 web 开发中非常常见，能够有效提升应用的性能和用户体验。

    struts2结合JSON的Ajax支持

    标签中的“源码”可能是指Struts2和JSON的整合涉及到的源代码编写，而“工具”可能指的是开发过程中使用的IDE、构建工具（如Maven或Gradle）和其他辅助开发的库，如jQuery或其他的Ajax库。 在实际项目中，使用...

    Struts2+jQuery（不用JSON）实现局部刷新

    - **Struts2的JSON插件**：虽然题目要求不使用JSON，但通常情况下，Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过，我们可以通过设置Content-Type为"text/plain"或"text/html"，让Struts2返回非JSON...

    Struts2整合jQuery实现Ajax功能_demo

    在IT领域，特别是Web开发中，Struts2与jQuery的结合使用是实现动态网页和Ajax功能的常见方式。本文将详细解析如何通过Struts2框架整合jQuery来实现Ajax功能，具体涉及的知识点包括：Struts2框架基础、jQuery库的应用...

    使用Struts2的JSON插件来实现JSON数据传递

    总的来说，Struts2的JSON插件大大简化了基于JSON的Web服务开发，使得Java开发者能够轻松地在Struts2框架内处理JSON数据，实现了前后端的高效通信。了解并熟练掌握这一插件的使用，对于提升Java Web应用的开发效率和...

    struts jquery json案例

    2. **Ajax请求**：Ajax请求通常包含URL（指向Struts Action的路径）、数据（可能以JSON格式封装）和回调函数。jQuery的`$.ajax()`或`$.getJSON()`方法可以方便地实现这一功能。 3. **Struts后台处理**：在Struts...

    Struts2与JSON

    在Struts2中，我们可以使用JQuery的Ajax方法（如`$.ajax()`或`$.post()`)发送异步请求，提交表单数据到服务器，同时获取JSON响应。 整合步骤如下： 1. **配置Struts2**: 首先，确保你的项目已经引入了Struts2的...

    struts2+ajax+jquery

    在这个"struts2+ajax+jquery"的主题中，我们将深入探讨如何利用Struts2、jQuery和Ajax技术实现Web页面的异步交互。 首先，Struts2作为MVC框架，它的核心是Action，它负责处理用户的请求，并通过配置的Result返回...

    struts+jquery+ajax无刷新验证用户名是否存在

    2. **Ajax请求**：使用jQuery的$.ajax()方法，设置URL为服务器端的验证接口，通常是一个Struts Action。请求类型（type）设为"POST"或"GET"，根据服务器端的需求。将输入框中的用户名值作为数据（data）发送到服务器...

Magicbox
Global site tag (gtag.js) - Google Analytics