`
conkeyn
  • 浏览: 1507185 次
  • 性别: 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页面里，都不需要我们后台拼装数据了，非常方便。

分享到：
| linux添加用户
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics