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


Posted in jQuery onApril 19, 2017

这个样例是用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请求就已经完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
Jquery-data的三种用法
Apr 18 #jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
You might like
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
js代码实现微博导航栏
2015/07/30 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
解决laravel session失效的问题
2019/10/14 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
python3.4控制用户输入与输出的方法
2018/10/17 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
食堂个人先进事迹
2014/01/22 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技