jQuery ajax請(qǐng)求struts action實(shí)現(xiàn)異步刷新
這個(gè)樣例是用JQuery ajax和struts來(lái)做的一個(gè)小樣例,在這個(gè)樣例中采用兩種方式將java Util中的list轉(zhuǎn)換成支json的格式,第一種是用json-lib.jar這個(gè)jar包來(lái)轉(zhuǎn)換,第二種是采用goole的gson-2.1.jar來(lái)轉(zhuǎn)換,大家可以根據(jù)需要導(dǎo)入相應(yīng)的jar包,在這里為了做測(cè)試將兩種jar包都導(dǎo)入了。下面開(kāi)始進(jìn)入正題
第一步:導(dǎo)入相關(guān)jar包,本樣例需導(dǎo)入struts相關(guān)jar包,json-lib.jar,gson-2.1.jar可以任意選擇,但是這里需要都導(dǎo)入,因?yàn)闉榱俗鰷y(cè)試,兩種jar包的轉(zhuǎn)換方式都用到了。
第二步:配置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,負(fù)責(zé)上下文一加載立即創(chuàng)建BeanFactory --> <context-param> <!-- 若applicationContext.xml沒(méi)有放在WEB-INF下或者不叫這個(gè)名字,必需聲明此參數(shù) --> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> </web-app>
第三步:新建struts.xml,默認(rèn)admin/下跳轉(zhuǎn)到/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"/> <!-- =================基礎(chǔ)跳轉(zhuǎn)====================== --> <action name="index"> <result>/WEB-INF/index.jsp</result> </action> </package> </struts>
第四步:編寫AjaxRequestAction.java文件,這里做了兩種請(qǐng)求,一種是直接請(qǐng)求到字符串,另一種是請(qǐng)求到一組數(shù)組格式的數(shù)據(jù),但該數(shù)據(jù)必須要轉(zhuǎn)換成JSON支持的數(shù)組,具體如下
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; /** * 創(chuàng)建時(shí)間:2014-10-24,ajax請(qǐng)求的action樣例 */ public class AjaxRequestAction extends ActionSupport{ private String sex; @Override public String execute() throws Exception { return super.execute(); } /** * ajax請(qǐng)求,以json格式的字符串響應(yīng)請(qǐng)求 */ public void ajaxString(){ System.out.println(sex); //獲取相應(yīng)Response HttpServletResponse response = ServletActionContext.getResponse(); //設(shè)置編碼方式 response.setCharacterEncoding("UTF-8"); try { if(sex.equals("nan")){ response.getWriter().write("我是男的"); }else if(sex.equals("nv")){ response.getWriter().write("我是女的"); }else{ response.getWriter().write("男女都不是"); } //將數(shù)據(jù)寫到頁(yè)面中 } catch (IOException e) { e.printStackTrace(); } } /** * ajax請(qǐng)求,以list的形式響應(yīng)請(qǐng)求,主要這里的list并不是Util的List,而是經(jīng)過(guò)轉(zhuǎn)換成指出json格式的List */ public void ajaxList(){ List<Object> list = new ArrayList<Object>(); list.add("張三"); list.add("李四"); //第一種方法:利用json-lib包中的JSONArray將List轉(zhuǎn)換成JSONArray各式。 JSONArray jsonArray = JSONArray.fromObject(list); //第二周方法:利用goole的json包將List轉(zhuǎn)換成Json對(duì)象。 Gson gson = new Gson(); String gsonList = gson.toJson(list); //獲取相應(yīng)Response HttpServletResponse response = ServletActionContext.getResponse(); //設(shè)置編碼方式 response.setCharacterEncoding("UTF-8"); try { //將數(shù)據(jù)寫到頁(yè)面中 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的訪問(wèn)路徑添加如下代碼
<package name="ajax" namespace="/ajax" extends="struts-default"> <!-- =================ajax請(qǐng)求跳轉(zhuǎn)====================== --> <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"/> <!-- =================基礎(chǔ)跳轉(zhuǎn)====================== --> <action name="index"> <result>/WEB-INF/index.jsp</result> </action> </package> <package name="ajax" namespace="/ajax" extends="struts-default"> <!-- =================ajax請(qǐng)求跳轉(zhuǎn)====================== --> <action name="ajax_*" class="com.fengqi.action.AjaxRequestAction" method="ajax{1}"> </action> </package> </struts>
第六步:編寫index.jsp文件,這里做了兩種請(qǐng)求,一種是直接請(qǐng)求到字符串,另一種是請(qǐng)求到一組數(shù)組格式的數(shù)據(jù),但該數(shù)據(jù)必須要轉(zhuǎn)換成JSON支持的數(shù)組,具體如下
<%@ 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異步刷新樣例測(cè)試</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 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",//請(qǐng)求url data:{sex:$("#txt1").val()}, success:function(data){//請(qǐng)求返回的數(shù)據(jù) $("div").html(data);//將數(shù)據(jù)打印到頁(yè)面的div中 } }); }); $("#hh2").click(function() { $.ajax({ url: "ajax/ajax_List",//請(qǐng)求url http://www.yxccc.com //cache: false, type: "POST", //請(qǐng)求頭,這里是post datatype: 'json', //請(qǐng)求數(shù)據(jù)各式,這里是json格式 success: function(data,status){ data = $.parseJSON(data); //將字符串格式的數(shù)據(jù)轉(zhuǎn)換成json對(duì)象 //這里將option元素移除是考慮到如果在頁(yè)面不刷新的情況下多次請(qǐng)求,會(huì)產(chǎn)生數(shù)據(jù)累加,不符合業(yè)務(wù)需求,因此需先刪除在增加元素。 $("option").remove(); $("select").append("<option>請(qǐng)選擇</option>");//在select元素下添加option子元素。 $(data).each(function(i){ //遍歷請(qǐng)求相應(yīng)的data數(shù)據(jù) $("select").append("<option>"+data[i]+"</option>"); }) } }); }); }); </script> </head> <body> <br> <h2 align="center">這里是ajax請(qǐng)求Demo,該實(shí)例是請(qǐng)求Struts中的action</h2> <br> <button id="hh1">請(qǐng)求返回常規(guī)字符串</button> <button id="hh2">請(qǐng)求返回JSON格式的List</button><br><br> <div>這里是div元素</div><br> 請(qǐng)選擇性別:<select id="txt1" name="sex"> <option>請(qǐng)選擇</option> <option value="nan">男</option> <option value="nv">女</option> </select><br><br> <select> <option>select選擇</option> </select> </body> </html>
這樣一個(gè)簡(jiǎn)單的ajax請(qǐng)求就已經(jīng)完成了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多,但是這個(gè)輪子我還是繼續(xù)做一個(gè),因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過(guò)來(lái)的(我已慢慢投入jQuery的懷抱),并且它的驗(yàn)證規(guī)則書(shū)寫方式也許會(huì)讓你眼前一亮。2009-12-12基于jQuery中ajax的相關(guān)方法匯總(必看篇)
下面小編就為大家?guī)?lái)一篇基于基于jQuery中ajax的相關(guān)方法匯總。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
主要功能是動(dòng)態(tài)增減輸入框,而且支持對(duì)各個(gè)輸入框的檢測(cè),每個(gè)輸入框在輸入內(nèi)容后,對(duì)其進(jìn)行錯(cuò)誤提示2013-07-07JQuery.Ajax()的data參數(shù)類型實(shí)例詳解
這篇文章主要介紹了JQuery.Ajax()的data參數(shù)類型實(shí)例詳解,需要的朋友可以參考下2015-11-11Jquery+WebService 校驗(yàn)賬號(hào)是否已被注冊(cè)的代碼
在Javascirpt代碼中,調(diào)用Jquery的方法$.Ajax(function)實(shí)現(xiàn)Ajax,傳遞賬號(hào)信息給Web服務(wù),Web服務(wù)再調(diào)用數(shù)據(jù)庫(kù)操作類查詢數(shù)據(jù)庫(kù),并返回?cái)?shù)據(jù)給前臺(tái)頁(yè)面。2010-07-07