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拖动改变div大小
Jul 04 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php split汉字
2009/06/05 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
python进阶教程之循环对象
2014/08/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
专科应届生求职信
2013/11/24 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
2014年元旦感言
2014/03/06 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python