精华内容
下载资源
问答
  • 页面局部刷新

    千次阅读 2018-09-20 14:20:07
    页面局部刷新方法1 #allRefresh对应的元素会定时刷新 var refreshTime = "1000";// 页面数据刷新定时单位为ms $(document).ready(function() { var i = 0; $(function() { /* * 页面定时器代码……...

    页面局部刷新方法1
    #allRefresh对应的元素会定时刷新

    var refreshTime = "1000";// 页面数据刷新定时单位为ms
    $(document).ready(function() {
    	var i = 0;
    	$(function() {
    		/*
    		 * 页面定时器代码……
    		 */
    		setInterval(function() {
    			$("#allRefresh").load(location.href + " #allRefresh");// 注意后面DIV的ID前面的空格,很重要!没有空格的话,会出双眼皮!(也可以使用类名)
    		}, refreshTime);
    	});
    });
    

    页面局部刷新方法2
    js动态更新页面

    展开全文
  • 主要介绍了HTML页面局部刷新的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章是对PHP页面局部刷新功能的实现进行了详细的分析介绍,需要的朋友参考下
  • 主要介绍了Springmvc加ajax实现上传文件并页面局部刷新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 关于页面局部刷新例程
  • AjaxAnyWhere 实现页面局部刷新,局部分页

    这个比较jquery、单纯ajax异步简单多了,不多说了直接上代码。


    需要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa.js  ,

    免费下载地址http://download.csdn.net/detail/xuke6677/8064977

    目录结构如下:




    1、ListBean.java 实体类   

    package org.ydd.test;
    
    public class ListBean {
    	private String id;
    	private String name;
    	private String sex;
    	private String work;
    	private String address;
            //get(),set()…… 省略
    }


    2、   AjaxAnyWhereTest.java  后台servlet


    package org.ydd.test;
    
    import java.io.IOException;
    
    
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    
    public class AjaxAnyWhereTest extends HttpServlet {
    	private static final long serialVersionUID = -5750167075517567170L;
    	List<ListBean> rs = new ArrayList<ListBean>();
    	
    	@Override
    	public void init() throws ServletException {
    		ListBean userBean = new ListBean();
    		userBean.setId("1");
    		userBean.setName("张三");
    		userBean.setSex("123");
    		userBean.setWork("prom");
    		userBean.setAddress("fdsfsd");
    		rs.add(userBean);
    	}
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    			doPost(request, response);
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		ListBean userBean = new ListBean();
    		String id= request.getParameter("id");
    		if(!"".equals(id) && id!=null){
    			userBean.setId(id);
    			userBean.setName(request.getParameter("name"));
    			userBean.setAddress(request.getParameter("address"));
    			userBean.setSex(request.getParameter("sex"));
    			userBean.setWork(request.getParameter("work"));
    			rs.add(userBean);
    		}
    		
    		if(rs.size()>0){
    			request.setAttribute("queryList", rs);
    		}
    		
    		request.getRequestDispatcher("list.jsp").forward(request, response);
    	}
    
    }
    
    

    3、web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" 
    	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_2_5.xsd">
    	
    	<!-- Ajax配置开始,带编码转换(包括ajax提交的编码) --> 
        <filter>
            <filter-name>AjaxAnywhere</filter-name>
            <filter-class>org.ajaxanywhere.AAFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name><!-- 普通提交方式编码 -->
                <param-value>GB2312</param-value>
            </init-param>
            <init-param>
                <param-name>ajaxencoding</param-name><!-- AJAX提交方式编码 -->
                <param-value>GB2312</param-value>
            </init-param>
        </filter>
        
        <filter-mapping>
            <filter-name>AjaxAnywhere</filter-name>
            <url-pattern>*</url-pattern>
        </filter-mapping>
        
        
      <servlet>
        <servlet-name>AjaxAnyWhereTest</servlet-name>
        <servlet-class>org.ydd.test.AjaxAnyWhereTest</servlet-class>
      </servlet>
    
      <servlet-mapping>
        <servlet-name>AjaxAnyWhereTest</servlet-name>
        <url-pattern>/AjaxAnyWhereTest</url-pattern>
      </servlet-mapping>
    
        <!-- Ajax配置结束 -->
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
    </web-app>
    
    

    4、index.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>My JSP 'index.jsp' starting page</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">
      </head>
      <body>
      	 <jsp:forward page="AjaxAnyWhereTest"/>
      </body>
    </html>
    
    


    5、list.jsp


    注:需要引入<script language="javascript" src="js/aa.js"></script>


    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>ajaxAnywhere局部刷新</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">
    	
    	<script language="javascript" src="js/aa.js"></script>	
    	<script type="text/javascript">
    	 <!-- 所要提交的表单 -->
    		ajaxAnywhere.formName="listForm";
    	 <!-- 所要刷新的区域 -->
    		ajaxAnywhere.getZonesToReload = function(){
    			return "formlist";
    		} 
    		//提交
    		function doCheck(){
    			var id =  document.getElementById("id").value;
    			if(id==""){
    				alert("请填写ID编号!");
    				return false;
    			}
    			var f=document.forms[0];
    			f.action="AjaxAnyWhereTest";
    			ajaxAnywhere.submitAJAX();
    		}
    	</script>
    	
      </head>
      
      <body>
      
    <center>
      <div>列表</div>
      <aa:zone name="formlist">
    	  <table border="1">
    	   		<tr>
    	   			<td>ID编号   </td>
    	   			<td>姓名</td>
    	   			<td>性别</td>
    	   			<td>工作行业</td>
    	   			<td>地址</td>
    	   		</tr>
    	  			<c:forEach var="listbean" items="${queryList}">
    			  <tr>
    			  	<td>${listbean.id}</td>
    			  	<td>${listbean.name}</td>
    			  	<td>${listbean.sex}</td>
    			  	<td>${listbean.work}</td>
    			  	<td>${listbean.address}</td>
    			  </tr>
    	  		    </c:forEach>
    	   </table>
      </aa:zone>
    </center> 
    <br>
    <br>
    <hr>
     <center>
        		<div> <h3>录入</h3></div>
        		<form name="listForm" action="AjaxAnyWhereTest"  method="post">
        		<table>
        			 <tr>
        			 	<td>ID编号 :</td><td><input type="text" name="id" id="id"/></td>
        			 </tr>
        			 <tr>
        			 	<td>姓名 :</td><td><input type="text" name="name" /></td>
        			 </tr>
        			 <tr>
        			 	<td>性别 :</td><td><input type="text" name="sex" /></td>
        			 </tr>
        			 <tr>
        			 	<td>工作行业:</td><td><input type="text" name="work" /></td>
        			 </tr>
        			 <tr>
        			 	<td>地址:</td><td><input type="text" name="address" /></td>
        			</tr>
        			<tr>
        				<td><input type="button" value="提交" οnclick="return doCheck()" /></td ><td><input type="reset" value="取消" /></td >
        			</tr> 
        			
        		</table>
        		</form>
        </center>  
      </body>
    </html>
    
    


    可以封装一下

    定义空的form表单只做跳转用<form name="listForm" action="/newActivity/hotSummerDays.html"  method="post"></form> 

    var url = "/newActivity/hotSummerDays.html?tradeId=lightenCountAndUser";
     publicSch("formlist","listForm",url);<span style="white-space:pre">																			
     function publicSch(listName,formName,url){
    		ajaxAnywhere.formName=formName;
    		ajaxAnywhere.getZonesToReload = function(){
    			return listName;
    		} 
    		var f=document.listForm;
    		f.action=url;
    		ajaxAnywhere.submitAJAX();
    	}




    6、注意问题:



    点击确定会显示具体的错误信息,如下

    <body>
    		<h1>
    			HTTP Status 404 - /newActivity/undefined
    		</h1>
    		<HR size="1" noshade="noshade">
    		<p>
    			<b>type</b> Status report
    		</p>
    		<p>
    			<b>message</b>
    			<u>/newActivity/undefined</u>
    		</p>
    		<p>
    			<b>description</b>
    			<u>The requested resource is not available.</u>
    		</p>
    		<HR size="1" noshade="noshade">
    		<h3>
    			Apache Tomcat/6.0.41
    		</h3>
    	</body>



    1、如果有使用jquery,一定要注意js的加载顺序。


    <title></title>
    <script type="text/javascript" charset="utf-8" src="/js/aa.js"/>
    <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
    
    </head>


    2、


     

    7、可以用在局部分页,只刷新分页的地方


    展开全文
  • 页面局部刷新原理思路

    千次阅读 2019-02-28 19:08:33
    html页面局部刷新思路分析: 一种是通过vue来绑定数据模型,这种方法返回的是数据,利用的是ajax请求数据,vue绑定数据是双向响应式的,这种方法实现局部刷新较为简单。 另一种是通过jquery操作dom元素的方法往标签...

    html页面局部刷新思路分析:

    一种是通过vue来绑定数据模型,这种方法返回的是数据,利用的是ajax请求数据,vue绑定数据是双向响应式的,这种方法实现局部刷新较为简单。

    另一种是通过jquery操作dom元素的方法往标签中写入html内容(ps:如果是下拉刷新的话,利用的则是追加的方法),也是通过ajax向后台请求数据,不同的是返回的数据类型是html,从而实现页面的局部刷新。

    以下分别是原生的写法,thinkphp框架的写法与laravel框架的写法

    原生的话直接在后台的php接口中将页面引入然后返回给前台就行前台通过js直接将html写入标签中即可。

    tp框架的话有它自己的语法,控制器中返回页面内容用fetch方法:

         ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容

            ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出,

                 就可以使用fetch方法来获取解析后的模板内容,

    上面是2者的区别,利用fetch方法即可。

    laravel框架中有view()->with();方法,原理其实和thinkphp中的fetch一个原理。

     

     

     

    展开全文
  • bootstarp的页面局部刷新

    千次阅读 2019-11-04 19:37:44
    bootstarp的页面局部刷新 1.最常用的:table.ajax.reload(); 2;偶然使用的,还挺好用:模拟一个页面顶部的模糊查询失去焦点事件; 如: $("#txt_name").triggerHandler("blur"); ...

    bootstarp的页面局部刷新

    1.最常用的:table.ajax.reload();
    2;偶然使用的,还挺好用:模拟一个页面顶部的模糊查询失去焦点事件;
    如:

    $("#txt_name").triggerHandler("blur");
    

    3:某些时候封装的条件查询不好用的时候

    table.ajax.url("xxxxx").load()
    
    展开全文
  • 关于jsp页面局部刷新div的问题

    千次阅读 2019-04-22 16:41:56
    关于jsp页面局部刷新div的问题 在js中使用 $("#div").load(location.href + " #div") //#div前有一个空格 可以使div局部刷新,在ajax请求中非常好用,但有时这种写法却不能局部刷新div。 这是因为当我们直接在一个...
  • 页面局部刷新三种方法

    千次阅读 2019-09-21 16:00:38
    页面局部刷新 1.使用ajax实现小部分的内容局部刷新 $.ajax({ url:“http://localhost:8080/intoHomepage.do”, type:“post”, data:{name:“mydata”}, success:function (result) { if(result){ //对后端返回的...
  • 自己利用jsf richfaces facelets实现的页面局部刷新的示例,有兴趣的朋友可以下载看看。
  • 使用js,实现切换tab页,页面局部刷新(并未重新加载),地址栏路径修改的效果。
  • springboot页面没有使用iframe局部刷新页面各种前端插件权限管理
  • jquery实现页面局部刷新

    千次阅读 2015-11-19 12:17:00
    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新。代码如下: Java代码       ...
  • ASP.NET页面局部刷新

    千次阅读 2010-10-26 18:37:00
    ASP.NET 页面局部刷新
  • dataTabley页面局部刷新

    2019-03-06 10:14:39
    最近客户提出一个需求,当编辑完信息的时候页面只进行局部刷新(只刷新列表,之前输入的查询条件不进行刷新),不要全局刷新,如果你是用dataTable做的非常简单就能轻轻松松搞定,只需要在将之前的 table.ajax....
  • JSP页面局部刷新

    千次阅读 2020-01-10 15:21:25
    jsp+ajax自动刷新局部页面 通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 AJAX 在浏览器与 Web...
  • Ajax实现 页面局部 刷新

    千次阅读 2018-10-08 17:53:45
    web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说...
  • iframe的name属性配合a标签的target属性实现页面局部刷新: 页面一代码: html> head lang="en"> meta charset="UTF-8"> title>title> head> body> ul> li>a href="M2.html" target="myFrame">培养目标a>li...
  • JSP页面局部刷新JFreeChart图

    千次阅读 2011-02-22 11:32:00
    JSP页面局部刷新JFreeChart图
  • VUE实现页面局部刷新

    千次阅读 2020-10-23 15:56:10
    vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法,接下来挨个介绍下: 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新页面地址"); //页面刷新 ...
  • Js实现页面局部刷新的代码一例

    千次阅读 2013-07-04 16:43:00
    实现页面的局部刷新的js代码。 如下: 页面局部刷新_www.jbxue.com function GetTime() { var time = new Date(); var year = time.getFullYear(); var month = time.g
  • ajax django 页面局部刷新

    千次阅读 2019-09-29 16:14:54
    ajax django 页面局部刷新 准备路由 对应的视图 对应的页面 经过三天的百度查询,初步实现了网页异步刷新 准备路由 urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,611
精华内容 20,244
关键字:

页面局部刷新