`
conkeyn
  • 浏览: 1524664 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Jquery局部刷新

 
阅读更多

1、通过form表单提交时返回false,不跳转到新的页面。

如下示例,在用户点击“button#btn_search”进行提交时,在JS代码里头返回false给html form标签,表示不提交。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cdr Demo</title>
<link rel="stylesheet" type="text/css"
	href="<s:url value='/bootstrap/css/bootstrap.css'/>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("button#btn_search").click(function(){//在点击提交按钮时返回false,就可以页面阻止跳转。
			$("form#form_search").ajaxSubmit(function(resp){
				$("div#search_result").html(resp);
			});
			return false;
		});
	});
</script>
</head>
<body
	style="background:url(<s:url value='/img/bg.png'/>);background-repeat:no-repeat;background-color: #C0DEED">
	<div class="container">
		<div class="page-header" style="border: none;">
			<h1>Cdr Demo</h1>
		</div>
		<form id="form_search" class="form-inline" action="search.do">
			主叫号码:<input name="addr" type="text" class="input" />
			<button id="btn_search" type="submit" class="btn">提交</button>
		</form>
		<div id="search_result" class="well rbwell"></div>
	</div>
</body>
</html>

 2、转自:http://blog.csdn.net/huangaigang6688/article/details/17038579

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的。

$("#waitWork").click(function(){
		var url = "请求地址";
		var data = {type:1};
		$.ajax({
			type : "get",
			async : false,  //同步请求
			url : url,
			data : data,
			timeout:1000,
			success:function(dates){
				//alert(dates);
				$("#mainContent").html(dates);//要刷新的div
			},
			error: function() {
               // alert("失败,请稍后再试!");
            }
		});
	});

<div id="mainContent">

 注意:后台需要针对div里的信息单独用一个jsp页面,不然就需要自己封装好需要的页面信息返回
这个方法可以实现单独刷新一个div,好用的一点就是:如果将div里需要的信息单独放到一个jsp页面里,都不需要我们后台拼装数据了,非常方便。

分享到:
评论

相关推荐

    JQuery局部刷新

    JQuery局部刷新http://www.daxueit.com/article/3081.html

    jQuery 局部div刷新和全局刷新方法总结

    局部刷新利用了jQuery的.load()方法,它允许我们加载新的HTML内容到指定的元素内,从而实现页面的局部动态更新。而全局刷新则通过不同的window.location属性实现,允许开发者根据不同的应用场景选择合适的刷新方式。...

    struts2+json+jquery局部刷新实现注册验证

    struts2+json+jquery局部刷新实现注册验证,包括前台的用户名、密码、手机、身份证、邮箱(包含发邮件技术)、邮箱验证码、验证码的验证,用到的是json+jquery,后台则是用struts2+java类

    jquery实现页面局部刷新

    **jQuery 实现页面局部刷新详解** 在Web开发中,页面刷新是常见的操作,但全局刷新会导致整个页面重新加载,这可能会浪费用户的时间和流量。为了提高用户体验,我们常常需要实现页面局部刷新,即只更新页面中特定...

    jquery局部刷新

    总结来说,jQuery的Ajax功能为局部刷新提供了强大支持,通过简单易用的API,我们可以实现各种动态加载和页面更新效果。在分页场景下,结合事件监听和数据传递,用户可以流畅地在不同页面间切换,而无需等待整个页面...

    运用jquery局部刷新从数据库取出的数据

    在这个场景中,我们将关注如何使用jQuery的`.load()`方法来实现从数据库中获取数据并进行局部刷新。 首先,`jQuery.load()`方法主要用于异步加载HTML文档的片段,并将其插入到DOM(文档对象模型)中的指定元素。它...

    20120102 NET+jQuery 实现局部刷新+分页+高亮显示搜索内容

    标题中的“20120102 NET+jQuery 实现局部刷新+分页+高亮显示搜索内容”指的是一个基于.NET技术和jQuery库的Web应用示例,它着重展示了如何在网页中实现以下功能: 1. **局部刷新(Ajax)**:在不重新加载整个页面的...

    经典jquery局部刷新增删改查

    "经典jquery局部刷新增删改查"这个主题聚焦于利用jQuery实现数据的动态更新,即“增删改查”功能,并且只涉及到页面的特定部分,而不是整个页面的刷新。 1. **jQuery基本概念**:jQuery是一个轻量级的库,通过链式...

    jQuery+ajax实现局部刷新的两种方法

    本文将介绍使用jQuery和ajax来实现页面局部刷新的两种方法。对于jQuery,它是一个快速、小巧、功能丰富的JavaScript库,通过它可以轻松操作DOM,而ajax允许我们实现无需重新加载整个页面就可以更新网页的部分内容。 ...

    Struts2+jQuery(不用JSON)实现局部刷新

    在这个“Struts2+jQuery实现局部刷新”的主题中,我们将探讨如何利用这两者的优势来实现页面的无刷新更新。 1. **Struts2框架介绍**: Struts2是一个基于MVC设计模式的Java Web框架,它提供了良好的结构和可扩展性...

    jquery .ajax 局部刷新之后 js无法调用问题解决

    然而,在使用`.ajax`进行局部刷新后,有时会出现JavaScript无法正确调用的问题,这主要涉及到DOM(文档对象模型)更新、作用域以及事件绑定等问题。下面将详细探讨这个问题及其解决方案。 ### 1. DOM更新问题 当`....

    jquery实现Ajax定时局部页面刷新

    ### jQuery 实现 AJAX 定时局部页面刷新 #### 背景介绍 在现代Web开发中,用户体验至关重要。用户往往不希望每次查看新数据时都必须手动刷新整个页面。为了解决这一问题,并提高用户体验,我们可以利用AJAX技术实现...

    jquery无刷新父级菜单切换

    综上所述,"jquery无刷新父级菜单切换"是通过JQuery实现的动态菜单功能,利用Ajax进行局部内容更新,同时借助CSS实现美观的选项卡切换效果。这种技术提高了网页的交互性和用户体验,是现代Web开发中的常见实践。

    JQuery可收缩展开的级联菜单与局部刷新

    本篇文章将深入探讨如何利用jQuery实现可收缩展开的级联菜单以及局部刷新功能。 首先,让我们理解级联菜单的概念。级联菜单,又称为下拉菜单或子菜单,是一种常见的用户界面元素,特别是在导航栏中。当用户点击一个...

    使用jquery局部刷新(jquery.load)从数据库取出数据

    使用jQuery提供的ajax交互功能,可以有效地实现局部刷新,从而提高页面的性能和用户体验。本文将探讨如何使用jQuery的.load方法从数据库中获取数据并实现页面的局部刷新。 首先,让我们明确一下什么是局部刷新。...

    Jquery实例2:可收缩展开的级联菜单与局部刷新

    本实例"Jquery实例2:可收缩展开的级联菜单与局部刷新"聚焦于利用jQuery实现动态交互效果,特别是创建可折叠的级联菜单和页面的局部刷新功能。这些功能在现代网页设计中极为常见,可以提升用户体验,使网站更加直观...

    servlet局部刷新及json字符串

    1.纯servlet+jquery局部刷新; 2.fresh 后台包含 json内容,需要json相关jar包,自行下载,不需要的可以删除; 3.有页面点击事件,初学者可以研究下; 4.QQ569317668 不喜勿喷 servlet局部刷新及json字符串 相互学习...

    框架式局部刷新最简单解决方案

    局部刷新技术是提升用户体验的一种重要手段,它允许用户在不重新加载整个页面的情况下更新页面的特定部分。本方案主要探讨的是如何在ASP.NET框架下实现一个简洁高效的局部刷新功能,特别是在文件上传场景中的应用。 ...

Global site tag (gtag.js) - Google Analytics