JQuery ajax请求struts action实现异步刷新的小实例

时间：2021-02-27 20:04:51

这个样例是用JQuery ajax和struts来做的一个小样例，在这个样例中采用两种方式将java Util中的list转换成支json的格式，第一种是用json-lib.jar这个jar包来转换，第二种是采用goole的gson-2.1.jar来转换，大家可以根据需要导入相应的jar包，在这里为了做测试将两种jar包都导入了。下面开始进入正题

第一步：导入相关jar包，本样例需导入struts相关jar包，json-lib.jar，gson-2.1.jar可以任意选择，但是这里需要都导入，因为为了做测试，两种jar包的转换方式都用到了。

第二步：配置web.xml

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

<web-app version="3.0"

	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_3_0.xsd">

  <display-name></display-name>

  <!-- 声明Struts2的前端控制器 -->

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

	<!-- 声明Spring的ContextListener，负责上下文一加载立即创建BeanFactory -->

	<context-param>  <!-- 若applicationContext.xml没有放在WEB-INF下或者不叫这个名字，必需声明此参数 -->

		<param-name>contextConfigLocation</param-name>

		<param-value>classpath:applicationContext.xml</param-value>

	</context-param>

</web-app>

第三步：新建struts.xml,默认admin/下跳转到/WEB-INF/index.jsp

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

<!-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  -->

<!DOCTYPE struts PUBLIC

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

	"http://www.yxccc.com/news/">

<struts>

	<package name="bg" namespace="/" extends="struts-default">

		<default-action-ref name="index"/>

	<!-- =================基础跳转====================== -->

		<action name="index">

			<result>/WEB-INF/index.jsp</result>

		</action>

	</package>

</struts>

第四步：编写AjaxRequestAction.java文件，这里做了两种请求，一种是直接请求到字符串，另一种是请求到一组数组格式的数据，但该数据必须要转换成JSON支持的数组，具体如下

package com.fengqi.action;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

import com.google.gson.Gson;

import com.opensymphony.xwork2.ActionSupport;

/**

 * 创建时间：2014-10-24，ajax请求的action样例

 */

public class AjaxRequestAction extends ActionSupport{

	private String sex;

	@Override

	public String execute() throws Exception {

		return super.execute();

	}

	/**

	 * ajax请求，以json格式的字符串响应请求

	 */

	public void ajaxString(){

		System.out.println(sex);

		//获取相应Response

		HttpServletResponse response = ServletActionContext.getResponse();

		//设置编码方式

		response.setCharacterEncoding("UTF-8");

		try {

			if(sex.equals("nan")){

				response.getWriter().write("我是男的");

			}else if(sex.equals("nv")){

				response.getWriter().write("我是女的");

			}else{

				response.getWriter().write("男女都不是");

			}

			//将数据写到页面中

		} catch (IOException e) {

			e.printStackTrace();

		}

	}

	/**

	 * ajax请求，以list的形式响应请求，主要这里的list并不是Util的List，而是经过转换成指出json格式的List

	 */

	public void ajaxList(){

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

		list.add("张三");

		list.add("李四");

		//第一种方法：利用json-lib包中的JSONArray将List转换成JSONArray各式。

		JSONArray jsonArray = JSONArray.fromObject(list);

		//第二周方法：利用goole的json包将List转换成Json对象。

		Gson gson = new Gson();

		String gsonList = gson.toJson(list);

		//获取相应Response

		HttpServletResponse response = ServletActionContext.getResponse();

		//设置编码方式

		response.setCharacterEncoding("UTF-8");

		try {

			//将数据写到页面中

			response.getWriter().println(jsonArray);

		} catch (IOException e) {

			e.printStackTrace();

		}

	}

	public String getSex() {

		return sex;

	}

	public void setSex(String sex) {

		this.sex = sex;

	}

}

第五步：在将struts.xml文件更新下，配置AjaxRequestAction.java的访问路径添加如下代码

<package name="ajax" namespace="/ajax" extends="struts-default">
<!-- =================ajax请求跳转====================== -->
<action name="ajax_*" class="com.fengqi.action.AjaxRequestAction" method="ajax{1}">
</action>
</package>

最后struts.xml的完整文件是

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

<!DOCTYPE struts PUBLIC

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

	"http://www.yxccc.com">

<struts>

	<package name="bg" namespace="/admin" extends="struts-default">

		<default-action-ref name="index"/>

	<!-- =================基础跳转====================== -->

		<action name="index">

			<result>/WEB-INF/index.jsp</result>

		</action>

	</package>

	<package name="ajax" namespace="/ajax" extends="struts-default">

	<!-- =================ajax请求跳转====================== -->

		<action name="ajax_*" class="com.fengqi.action.AjaxRequestAction" method="ajax{1}">

		</action>

	</package>

</struts>

第六步：编写index.jsp文件，这里做了两种请求，一种是直接请求到字符串，另一种是请求到一组数组格式的数据，但该数据必须要转换成JSON支持的数组，具体如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

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>ajax异步刷新样例测试</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

　　　　 <link href="http://www.yxccc.com/css/css.css" rel="stylesheet" type="text/css" />

	<script src="js/jquery-2.1.1.min.js"></script>

	<script type="text/javascript">

	$(document).ready(function() {

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

			$.ajax({

				url:"ajax/ajax_String",//请求url

				data:{sex:$("#txt1").val()},

				success:function(data){//请求返回的数据

					$("div").html(data);//将数据打印到页面的div中

				}

			});

		});

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

			$.ajax({

	            url: "ajax/ajax_List",//请求url http://www.yxccc.com

	            //cache: false,

	            type: "POST",	//请求头，这里是post

	            datatype: 'json', //请求数据各式，这里是json格式

	            success: function(data,status){

	    			data = $.parseJSON(data);	//将字符串格式的数据转换成json对象

	    			//这里将option元素移除是考虑到如果在页面不刷新的情况下多次请求，会产生数据累加，不符合业务需求,因此需先删除在增加元素。

	            	$("option").remove();

	            	$("select").append("<option>请选择</option>");//在select元素下添加option子元素。

	            	$(data).each(function(i){	//遍历请求相应的data数据

	            	      $("select").append("<option>"+data[i]+"</option>");

	            	})

	            }

	        });

	    });

	});

	</script>

  </head>

  <body>

  <br>

    <h2 align="center">这里是ajax请求Demo，该实例是请求Struts中的action</h2> <br>

    <button id="hh1">请求返回常规字符串</button>

    <button id="hh2">请求返回JSON格式的List</button><br><br>

    <div>这里是div元素</div><br>

    请选择性别:<select id="txt1" name="sex">

    	<option>请选择</option>

    	<option value="nan">男</option>

    	<option value="nv">女</option>

    </select><br><br>

    <select>

    <option>select选择</option>

    </select>

  </body>

</html>

这样一个简单的ajax请求就已经完成了。

相关文章