手记

Struts2+Jquery+Ajax+Json

 现在使用Json来封装并且传递数据的情形是越来越多了,可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢?在网上查了下就那几个例子被转过来转过去的,还有很多例子根本行不通,这里经过自己摸索写了个小例子。

1、jar包支持

 

2、Struts配置文件


<?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="ajaxLogin" class="org.test.action.AjaxLoginAction">  

             <!-- 返回类型为json 在json-default中定义 -->  

            <result type="json">  

                 <!-- root的值对应要返回的值的属性 -->  

                <!-- 这里的result值即是 对应action中的 result -->  

                <param name="root">result</param>  

             </result>                  

        </action>  

</package> 

</struts>

3.Action文件


 

 

 

 

 

import java.util.ArrayList;

import java.util.List;

import java.util.Map;

import java.util.TreeMap;

 

import org.test.action.User;

 

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

 

public class AjaxLoginAction extends ActionSupport {

private String result;  

private String loginName;  

private String password;  

 

public String getResult() {  

       return result;  

   }  

 

public void setResult(String result) {  

 this.result = result;  

}  

 

public String getLoginName() {  

 return loginName;  

}  

 

public void setLoginName(String loginName) {  

 this.loginName = loginName;  

}  

 

public String getPassword() {  

 return password;  

}  

 

public void setPassword(String password) {  

 this.password = password;  

}  

    

public String execute() {   

System.out.println("name========="+this.loginName);

System.out.println("password========="+password);

      try{  

      

      User user1=new User();

      user1.setUserName("张三");

      user1.setPassword("123");

      user1.setAge("22");

      

      User user2=new User();

      user2.setUserName("李四");

      user2.setPassword("456");

      user2.setAge("23");

      List<User> list=new ArrayList<User>();

      list.add(user1);

      list.add(user2);

      JSONArray jo=JSONArray.fromObject(list);

   System.out.println("action中的JSON======"+jo);  

          result = jo.toString();    

   System.out.println("action中的result==="+result);

      }catch(Exception e){  

       System.out.println(e);  

      }  

      return SUCCESS;        

 }  

}

4、前台显示页面


<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<!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">

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

  $(document).ready( function() {

  //使用 Ajax 的方式 判断登录

  $("#btn_login").click( function() {

   var url = 'ajaxLogin.action';

   //获取表单值,并以json的数据形式保存到params中

   var params = {

    loginName:$("#loginName").val(),

    password:$("#password").val()

   }

   //使用$.post方式 

   $.post(

    url,  //服务器要接受的url

    params,  //传递的参数  

    function cbf(data){ //服务器返回后执行的函数 参数 data保存的是服务器发送到客户端的数据

     alert("服务器端返回的data========"+data);

     var infoArray = eval("("+data+")"); //包数据解析为json格式  

      for(var i=0;i<infoArray.length;i++){

  //$("#result").append("<tr><td>"+infoArray[i].userName+"</td><td>"+infoArray[i].password+"</td><td>"+infoArray[i].age+"</td></tr>");

  $("#"+(i*7+1)).html(infoArray[i].userName+( i*7+1));

  $("#"+(i*7+2)).html(infoArray[i].password+( i*7+2));

  $("#"+(i*7+3)).html(infoArray[i].age+( i*7+3));

      }

    }, 

      'json' //数据传递的类型  json

   );

   

   

  });

 });

</script>

</head>

<body>

<table align="center">

<tr>

<td>

<span>用户名:</span>

</td>

<td>

<input type="text" id="loginName" name="loginName">

</td>

</tr>

<tr>

<td>

<span>密码:</span>

</td>

<td>

<input type="password" name="password" id="password">

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" id="btn_login" value="Login" />

</td>

</tr>

</table>

AJAX返回信息:

<br />

<div id="result" align="center"> 

<table width="60%" cellpadding="0" cellspacing="0">

<tr><td>用户名</td> <td>密码</td> <td>年龄</td></tr>

<%

for(int i=0;i<2;i++){

%>

<tr><td id="<%=i*7+1 %>"> username(<%=i*7+1 %>)</td> <td id="<%=i*7+2 %>">password(<%=i*7+2 %>) </td> <td id="<%=i*1+3 %>"> age(<%=i*7+3 %>)</td></tr>

<%

}

%>

</table>

</div>

</body>

</html>




0人推荐
随时随地看视频
慕课网APP