jQuery ajax请求struts action实现异步刷新
这个样例是用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请求就已经完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序开发入门基础教程
下一篇: PHP实现正则表达式分组捕获操作示例