Ajax局部刷新

最新推荐文章于 2023-06-23 10:42:42 发布
最新推荐文章于 2023-06-23 10:42:42 发布
阅读量294 收藏
点赞数
文章标签： ajax html struts bean dao java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_fangyong/article/details/5861498
版权
  1. package com.dd.struts.action;   
  2.   
  3. import java.util.List;   
  4.   
  5. import javax.servlet.http.HttpServletRequest;   
  6. import javax.servlet.http.HttpServletResponse;   
  7.   
  8. import org.apache.struts.action.Action;   
  9. import org.apache.struts.action.ActionForm;   
  10. import org.apache.struts.action.ActionForward;   
  11. import org.apache.struts.action.ActionMapping;   
  12. import org.apache.struts.action.DynaActionForm;   
  13.   
  14. import com.dd.util.DBConnection;   
  15.   
  16.   
  17. public class QueryAction extends Action {   
  18.        
  19.     public ActionForward execute(ActionMapping mapping, ActionForm form,   
  20.             HttpServletRequest request, HttpServletResponse response) {   
  21.          
  22.                   //struts 的动态ActionForm 在struts_config.xml 里面配置   
  23.         DynaActionForm queryForm = (DynaActionForm) form;// TODO Auto-generated method stub   
  24.   
  25.         String name = (String)queryForm.get("name");   
  26.            
  27.         List list =  null;   
  28.         try {   
  29.                             //后台DAO层   
  30.             list = DBConnection.getInfo(name);   
  31.         } catch(Exception ex) {   
  32.             ex.printStackTrace();   
  33.         }   
  34.         request.setAttribute("info", list);   
  35.         return mapping.findForward("result");   
  36.     }   

 

页面JS:

 

 

  1. var xmlHttp ;   
  2. function createXDOM() {   
  3.        
  4.     if(window.XMLHttpRequest) {   
  5.            
  6.         xmlHttp = new XMLHttpRequest;      
  7.            
  8.     } else if (window.ActiveXObject) {   
  9.            
  10.         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
  11.     } else {   
  12.            
  13.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  14.     }       
  15. }   
  16.   
  17. function getInfoByName() {   
  18.     createXDOM();   
  19.        
  20.     var name = document.getElementsByName("name")[0].value;   
  21.        
  22.     var url = "query.do";   
  23.     var param = "name="+name;   
  24.     xmlHttp.open("post",url,true);   
  25.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
  26.     xmlHttp.onreadyStatechange=function(){   
  27.         if(xmlHttp.readyState==4) {   
  28.             //alert(xmlHttp.responseText);   
  29.             result.innerHTML=xmlHttp.responseText;   
  30.         } else {   
  31.             result.innerHTML="请稍等...";   
  32.         }   
  33.     }   
  34.     xmlHttp.send(param);   
  35. }  

 

  1. <%@ page language="java" pageEncoding="GBK"%>   
  2.   
  3. <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>   
  4. <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>   
  5. <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>   
  6. <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>   
  7.   
  8.   
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  10. <html:html lang="true">   
  11.      
  12.   <body>   
  13.     <table border=1>   
  14.         <tr>   
  15.             <th>1</th>   
  16.             <th>2</th>   
  17.             <th>3</th>   
  18.             <th>4</th>   
  19.             <th>5</th>   
  20.             <th>6</th>   
  21.             <th>7</th>   
  22.             <th>8</th>   
  23.             <th>9</th>   
  24.             <th>10</th>                
  25.         </tr>   
  26.         <logic:iterate id="i" name="info">   
  27.             <tr>   
  28.                 <td>${i.cus_id }</td>   
  29.                 <td>${i.cusname }</td>   
  30.                 <td>${i.ctname }</td>   
  31.                 <td>${i.itname }</td>   
  32.                 <td>${i.creditname }</td>   
  33.                 <td>${i.elname }</td>   
  34.                 <td>${i.custel }</td>   
  35.                 <td>${i.cusemail }</td>   
  36.                 <td>${i.cusaddr }</td>   
  37.                 <td>${i.cusremark }</td>   
  38.             </tr>   
  39.         </logic:iterate>   
  40.     </table>   
  41.   </body>   
  42. </html:html>  
  43. <%@ page language="java" pageEncoding="GBK"%>   
  44. <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>    
  45. <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>   
  46.   
  47. <script type="text/javascript" src="ajax.js"></script>   
  48.   
  49. <html>    
  50.     <head>   
  51.         <title>JSP for DynaActionForm form</title>   
  52.     </head>   
  53.     <body>   
  54.         <html:form action="query.do" method="post">   
  55.             name : <html:text property="name"/><html:errors property="name"/><br/>   
  56.             <html:button property="btn" value="查询" οnclick="getInfoByName()"></html:button>   
  57.         </html:form>   
  58.         <hr>   
  59.         <div id="result"></div>   
  60.     </body>   
  61. </html>  

 

 

 

 

wang_fangyong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax局部刷新
molu1991的博客
04-17 2046
ajax是用来做局部刷新的。 局部刷新使用的核心对象是 异步对象（XMLHttpRequest） 这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。 创建 XMLHttpRequest 对象的语法（xhr）： var xmlhttp=new XMLHttpRequest(); 通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。 语法： xmlHttp.onreadystatechange= fun.
AJAX：实现局部刷新
qq_43568982的博客
09-06 6217
开始时间：2021-09-04 AJax
Ajax实现局部刷新
热门推荐
bug_producter的博客
03-02 3万+
ajax的两种请求方式前言一、 Ajax是什么？二、实现方式：1.原生的JS实现方式（了解）2.JQeury实现方式 前言 最近复习了一下jQuery的一些内容，特此整理一下一些能用的得到的知识点，以前才学jQuery的时候压根就没有注意到那么多的细节，另外最近一直都在整理前端的一些工作中学到的小经验，大概还会有十篇左右的内容，就会慢慢开始整理后端，框架，以及数据库的一些小知识点 一、 Ajax是什么？ 概念： ASynchronous JavaScript And XML 异步的JavaScript
AJAX局部刷新功能实现
just_learing的博客
04-16 2928
Ajax局部刷新功能实现
第5讲：使用ajax技术实现局部刷新功能（xml数据）
软件之家的博客
06-23 1007
使用ajax技术实现局部刷新功能，每2秒刷新一次数据，本案例使用原生态xmlhttprequest对象，GET方法通讯，使用responseXML属性返回xml格式数据，同时刷新界面数据。
ajax局部刷新实例 (三种方法推荐)
10-20
下面小编就为大家带来一篇ajax局部刷新实例 (三种方法推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery ajax 局部刷新小案例
10-26
本篇文章将深入讲解一个jQuery AJAX局部刷新的小案例，帮助开发者理解和应用这一技术。 首先，我们需要理解jQuery的核心库`jquery.js`，这是实现AJAX功能的基础。在HTML文件中，通过`<script>`标签引入jQuery库，...
纯JS实现AJAX局部刷新功能
10-20
以下是一个简单的AJAX局部刷新的JavaScript实现： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 定义请求类型和URL xhr.open('POST', '03-ajaxPost.php'); // 'POST' 或 'GET' /...
JQuery 又谈ajax局部刷新
10-18
主要为大家详细介绍了JQuery ajax局部刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
layui的checbox在Ajax局部刷新下的设置方法
10-18
今天小编就为大家分享一篇layui的checbox在Ajax局部刷新下的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ajax实现了一个页面数据的局部刷新
05-22
本文档利用ajax实现了一个页面数据的局部刷新。
AJAX的原理—如何做到异步和局部刷新【实现代码】
10-22
如何做到异步和局部刷新？下面小编就为大家带来一篇AJAX的原理—如何做到异步和局部刷新【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用ajax实现页面的局部刷新
ccsky001的天空
03-09 4186
在web应用中，经常变化的是数据，但为了加载新数据就去从新加载页面，不仅麻烦，也不友好。今天我利用ajax实现了一个页面数据的局部刷新，效果如下： 表格中的信息每隔五秒后刷新，并从服务器端得到信息，加入table中。 下面介绍一下他的实现：onload()函数使页面加载时就被调用，这里介绍一下startcallback函数，其中的setTimeout函数是一
异步请求，局部更新页面------Ajax
m0_73557631的博客
05-10 509
.XHLHttpRequest是异步发送，在服务端没有响应前，浏览器不需要等待，用户可以完成其他操作。1.请求把数据全部提交给服务端，数据大，没有意义。3.通过http响应，把数据返回给浏览器。
AJAX（局部刷新数据）
玉爷的博客
04-11 1万+
1、AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML） 2、特点： 页面没有改变 异步发送请求，获取数据 数据响应时间不确定 不能与同步一起使用（同步的业务数据不能通过异步来得到） 打电话——同步 发短信——异步 3、应用 ——注册用户名验证 ——自动补全 ——网络电视下面的广告 ——crud Aja...
Ajax实现页面局部刷新
12-24 4300
这里通过点击一个按钮，然后下面产生一段文字，而整个页面不用刷新 运行结果：
使用ajax实现页面局部刷新
qianfeng_dashuju的博客
04-27 1万+
　　　　简述　　网页局部刷新功能在web网站上已经屡见不鲜了，如即时新闻信息，股票信息等，都需要不断获取最新信息。在传统的web实现方式中，想要实现类似的效果，必须进行整个页面的刷新，在网络速度受到一定限制的情况下，这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。Ajax技术的出现很好的解决了这个问题，利用Ajax技术可以实现网页的局部刷新，只更新指定的数据，并不更新其他的数据。本文...
jQuery+ajax实现局部刷新
梦想起飞的地方.........
07-13 1336
jQuery+ajax实现局部刷新 在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()，其他高级方法的使用以后再做详细笔记。 第一种： 当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。 jq-load.html： <!DOCTYPE html> 2 <html> 3 <h
django ajax 局部刷新
最新发布
10-19
Django Ajax局部刷新是指使用Ajax技术，通过向服务器发送异步请求，获取数据并更新页面的部分内容，而不是刷新整个页面。在Django中，可以使用jQuery或JavaScript来实现Ajax局部刷新。具体步骤如下： 1. 在前端页面中引入jQuery或JavaScript库。 2. 在前端页面中定义一个函数，用于向服务器发送异步请求，并处理服务器返回的数据。 3. 在Django后端中定义一个视图函数，用于处理Ajax请求，并返回需要更新的数据。 4. 在Django后端中定义一个URL路由，将Ajax请求映射到对应的视图函数。 5. 在前端页面中调用定义的函数，向服务器发送异步请求，并更新页面的部分内容。 通过使用Ajax局部刷新，可以提高网站的响应速度和用户体验。同时，也可以减轻服务器的负担，提高网站的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值