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表单设置值的方法
Jun 30 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery操作元素追加内容示例
Jan 10 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
新52大事件
2020/03/03 欧美动漫
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python基础之入门必看操作
2017/07/26 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Django 限制访问频率的思路详解
2019/12/24 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
人民教师求职自荐信
2014/03/12 职场文书
我爱我家教学反思
2014/05/01 职场文书
电工技术比武方案
2014/05/11 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
爱的教育读书笔记
2015/06/26 职场文书
员工考勤管理制度
2015/08/06 职场文书
生活小常识广播稿
2015/08/19 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android