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

2 篇文章 0 订阅
1 篇文章 0 订阅

这个样例是用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://struts.apache.org/dtds/struts-2.3.dtd">

<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://struts.apache.org/dtds/struts-2.3.dtd">

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

	<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
	            //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请求就已经完成了。



  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值