struts与jquery整合

最新推荐文章于 2024-09-16 08:47:17 发布

cnaning

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量127

点赞数

分类专栏： ajax-jquery 文章标签： Struts jQuery json Ajax Myeclipse ViewUI

本文链接：https://blog.csdn.net/cnaning/article/details/83371223

版权

ajax-jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、首先导入几个jar包
        commons-beanutils.jar
        commons-collections.jar
        commons-logging.jar
        commons-lang.jar
        ezmorph-1.0.6.jar
        json-lib-2.2.3-jdk.jar

2、服务器端处理程序

LoginAction

/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package com.sailor.test.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import net.sf.json.JSONArray;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.sailor.test.action.form.LoginForm;
import com.sailor.test.model.LoginDTO;

/** *//** 
 * MyEclipse Struts
 * Creation date: 12-28-2008
 * 
 * XDoclet definition:
 * @struts.action path="/login" name="loginForm" input="/login.jsp" scope="request" validate="true"
 */
public class LoginAction extends Action {
    /**//*
     * Generated Methods
     */

    /** *//** 
     * Method execute
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        
        
        System.out.println("begin");

        LoginForm loginForm = (LoginForm) form;
        
        List<LoginDTO> list = new ArrayList<LoginDTO>();
        
        LoginDTO l1 = new LoginDTO();
        l1.setUsername("haiou");
        l1.setPassword("sa");
        
        LoginDTO l2 = new LoginDTO();
        l2.setUsername("sailor");
        l2.setPassword("123456");
        
        LoginDTO l3 = new LoginDTO();
        l3.setUsername(loginForm.getUsername());
        l3.setPassword(loginForm.getPassword());

        list.add(l1);
        list.add(l2);
        list.add(l3);
        
        //适用于List
        //Map<String, Object> map = new HashMap<String, Object>();
        //map.put("userlist", list);
        //JSONObject json = JSONObject.fromObject(map);
        
        //适用于Map
        JSONArray json = JSONArray.fromObject(list);
        
        try {
            PrintWriter out = response.getWriter();
            out.print(json);
            
        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }
}

2、struts-config，web.xml不需要特殊的配置

3、login.jsp：输入用户名和密码，然后显示在本页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
 
<html> 
    <head>
        <title>JSP for LoginForm form</title>

          <script src="jquery-1[1].2.1.pack.js" charset="utf-8"></script>
    <script>
    $(document).ready(function(){
    
      $("#userlogin").click(function(){
            $.ajax({
                 url:'login.do', 
                 type: 'post',
                 data:'username='+$("#username").val()+'&password='+$("#password").val(), 
                 timeout: 2000,
                 error: function(){
                    alert('错误');
                 },
                success: function(json){
                
                var users = eval('(' + json + ')');
                
                $("#result").empty();
                $("#username").attr("value",""); 
                $("#password").attr("value",""); 
                
                //返回的是List
               $.each(users,function(i, user){       
                  $("#result").append("<li>"+ i + " name: " + user.username + "&nbsp; pwd:"+ user.password +"</li>");
               });
               
               //返回的是Map类型
               //  var users = myObject.userlist;
               // $.each(users,function(i, user){
               //    $("#result").append("<li>"+ i + " name: " + user.username + "&nbsp; pwd:"+ user.password +"</li>");
               // });
                }
         });
        
     });      
   
        //ajax提交
        $("#loading").ajaxStart(function(){ 
             $(this).html("<img src=\"loading.gif\">&nbsp;正在加载");
          }); 
      
       //ajax成功状态
        $("#loading").ajaxSuccess(function(){
             $(this).html("保存成功!");
         });
         
        //ajax结束状态
         $("#loading").ajaxStop(function(){
           $(this).hide();
         }); 
   
    });
    </script>


    </head>
    <body> 
    用户名 : <input type="text" id="username" name="username"/><br/>
    密码 :     <input type="password" id="password" name="password"/><br/>
            <font id="userlogin">登陆</font><span id="loading"></span>

    <p id="result"></p>
    </body>
</html>