当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery ajax请求struts action实现异步刷新

jQuery ajax请求struts action实现异步刷新

2018年05月20日  | 移动技术网IT编程  | 我要评论

这个样例是用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%>" rel="external nofollow" >
  
  <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请求就已经完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网