广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery中ajax请求struts action实现异步刷新的示例分析
  • 854
分享到

jQuery中ajax请求struts action实现异步刷新的示例分析

2024-04-02 19:04:59 854人浏览 独家记忆
摘要

小编给大家分享一下Jquery中ajax请求struts action实现异步刷新的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!第一步:导入相关jar包,本样例需导入struts

小编给大家分享一下Jqueryajax请求struts action实现异步刷新的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

第一步:导入相关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>
public class AjaxRequestAction extends ActionSupport{
 private String sex;
 @Override
 public String execute() throws Exception {
 return super.execute();
 }
 
 
 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();
 }
 }
 
 
 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() {
 $("#hh2").click(function(){
  $.ajax({
  url:"ajax/ajax_String",//请求url
  data:{sex:$("#txt1").val()},
  success:function(data){//请求返回的数据
   $("div").html(data);//将数据打印到页面的div中
  }
  });
 });
 $("#hh3").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>
  <h3 align="center">这里是ajax请求Demo,该实例是请求Struts中的action</h3> <br>
  <button id="hh2">请求返回常规字符串</button>
  <button id="hh3">请求返回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中ajax请求struts action实现异步刷新的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网VUE频道,感谢各位的阅读!

--结束END--

本文标题: jQuery中ajax请求struts action实现异步刷新的示例分析

本文链接: https://www.lsjlt.com/news/71537.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中ajax请求struts action实现异步刷新的示例分析
    小编给大家分享一下jQuery中ajax请求struts action实现异步刷新的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!第一步:导入相关jar包,本样例需导入struts...
    99+
    2022-10-19
  • Ajax请求中异步与同步的示例分析
    这篇文章主要为大家展示了“Ajax请求中异步与同步的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax请求中异步与同步的示例分析”这篇文章吧。 ...
    99+
    2022-10-19
  • ajax实现无刷新分页的示例分析
    这篇文章给大家分享的是有关ajax实现无刷新分页的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加...
    99+
    2023-06-08
  • javascript请求servlet实现ajax的示例分析
    小编给大家分享一下javascript请求servlet实现ajax的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!aj...
    99+
    2022-10-19
  • JQuery中Ajax异步操作之动态添加节点功能的示例分析
    小编给大家分享一下JQuery中Ajax异步操作之动态添加节点功能的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!异步操...
    99+
    2022-10-19
  • Vue中对iframe实现keep alive无刷新的示例分析
    这篇文章主要介绍Vue中对iframe实现keep alive无刷新的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue的keep-alive原理要实现对保持iframe页...
    99+
    2022-10-19
  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析
    这篇文章主要介绍JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!下面的JS代码是一个最基础的JS的ajax实...
    99+
    2022-10-19
  • 微信小程序中scroll-view实现上拉加载与下拉刷新的示例分析
    这篇文章主要为大家展示了“微信小程序中scroll-view实现上拉加载与下拉刷新的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中scrol...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作