Structs接收和处理Ajax发送的数据

Posted 2021-04-15 猿在囧途

本来说好的第二天发Structs如何接收和处理Ajax发送的数据，但因为近期公司培训考试加上乱七八糟的事情给耽误了，小编在此致歉，今天继续和大家一起学习Structs如何接收和处理Ajax发送的数据。

主要实现步骤如下： 

1、JSP页面使用脚本代码执行ajax请求 

2、Action中查询出需要返回的数据，并转换为json类型模式数据 

3、配置struts.xml文件

4、页面脚本接受并处理数据

为了更好的理解，我做了一个演示的Demo。

项目所需架包如下：

其中的servlet-api.jar要和项目发布的tomcat相对应，刚开始就是因为我用了tomcat7的包在tomcat8的环境下运行导致报错了。

这些包中,下图为structs的核心包：

json所需要的包：

commons-logging-*.jar在导入struts核心包的时候就导入了，所以导入json包的时候可以去掉这个包

页面初始效果图：

首先是在web.xml中配置structs的核心过滤器：<filter>

<filter-name>struts2</filter-name>

 <!-- struts版本2.1以前 -->

<!--<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>-->

<!-- struts版本2.1以上 -->

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

然后新建UserAction处理类：

package com.ajaxcontact.action;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONObject;

import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport implements ServletRequestAware{

private static final long serialVersionUID = 1L;

private HttpServletRequest request;

private String result;

public void setServletRequest(HttpServletRequest arg0) {

this.request = arg0;

}

public String getResult() {

return result;

}

public void setResult(String result) {

this.result = result;

}

/**

 * 处理ajax请求

 * @return SUCCESS

*/

public String userlogin(){

try {

//获取数据

String username = request.getParameter("username");

String password = request.getParameter("password");

boolean loginflag = true;

String message = username+"登陆成功！";

SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式

String time = df.format(new Date());// new Date()为获取当前系统时间

//将数据存储在map里，再转换成json类型数据，也可以自己手动构造json类型数据

Map<String,Object> map = new HashMap<String,Object>();

map.put("loginflag", loginflag);

map.put("message",message);

map.put("time", time);

SONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据

result = json.toString();//给result赋值，传递给页面

} catch (Exception e) {

e.printStackTrace();

}

return SUCCESS;

}

}

配置structs.xml，将写好的UserAction配置进去：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC

 "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"

 "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<!--解决乱码    -->

<constant name="struts.i18n.encoding" value="UTF-8"></constant> 

<package name="ajaxcontact" extends="struts-default,json-default">

<action name="*UserAction" method="{1}" class="com.ajaxcontact.action.UserAction">

<result name="fail">error.jsp</result>

<!-- 返回json类型数据 -->

<result type="json">

<param name="root">result<!-- root为返回的是根节点，result是action中设置的变量名，也是页面需要返回的数据，该变量必须有setter和getter方法 --></param>

</result>

</action>

</package>

</struts> 

最后就是页面JSP的代码了：

引入jquery和css

页面表单和字段：

 <h3>ajax传递数据给structs：登陆测试框</h3>

<table style="border: 1px;">

<tr>

<td>账号：</td>

<td><input type="text" name="username" /></td>

</tr>

 <tr>

<td>密码：</td>

<td><input type="text" name="password" /></td>

</tr>

 </table>

<input type="button" class="btn" value="登陆测试"/>

<br/>

<br/>

<br/>

 <h3>ajax传递数据给structs：测试结果</h3>

<ul>

<li>登陆是否成功：<span id="loginflag">赞无数据</span></li>

<li class="li_layout">登陆信息：<span id="message">暂无数据</span></li>

<li class="li_layout">登陆时间：<span id="time">暂无数据</span></li>

</ul>

ajax发送请求和接收处理数据：

<script type="text/javascript">

/* 提交结果，执行ajax */

function btn(){

var $btn = $("input.btn");//获取按钮元素

//给按钮绑定点击事件

$btn.bind("click",function(){

$.ajax({

type:"post",

url:"userloginUserAction",//需要用来处理ajax请求的action,userlogin为处理的方法名，UserAction为action名

data:{//设置数据源

username:$("input[name=username]").val(),

password:$("input[name=password]").val()

},

dataType:"json",//设置需要返回的数据类型

success:function(data){

var d = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构

//得到的d是一个形如{"key":"value","key1":"value1"}的数据类型，然后取值出来

$("#loginflag").text(""+d.loginflag+"");

$("#message").text(""+d.message+"");

$("#time").text(""+d.time+"");

},

error:function(){

alert("测试失败！");

}//这里不要加","

});

});

}

/* 页面加载完成，绑定事件 */

$(document).ready(function(){

btn();//点击提交，执行ajax

});

</script>

页面测试效果图：

输入用户名和密码以后，前台接收到反馈数据

好了，Structs如何接收和处理Ajax发送的数据讲到这里就结束了，谢谢亲们的观看，猿在囧途，让我们红尘相伴。欢迎您下次再来~