(局部刷新)jquery.ajax提交并实现单个div刷新

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

jsp页面ajax代码如下:

<span style="font-size:18px;line-height: 28px;">$("#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("失败,请稍后再试!");
            }
		});
	});
</span>
<span style="font-size:18px;line-height: 28px;"><div id="mainContent"></span><span style="line-height: 21px; font-size: 12px;">
</span>
注意:后台需要针对div里的信息单独用一个jsp页面,不然就需要自己封装好需要的页面信息返回
这个方法可以实现单独刷新一个div,好用的一点就是:如果将div里需要的信息单独放到一个jsp页面里,都不需要我们后台拼装数据了,非常方便。
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
使用jQueryajax方法进行请求提交后,可以通过以下几种方式实现局部刷新页面: 1. 使用jQuery的load方法刷新页面局部内容: 在ajax请求成功的回调函数中,使用load方法将需要刷新的页面内容加载到指定的元素中。例如,假设需要刷新id为"content"的div元素,可以使用以下代码: ```javascript $.ajax({ url: "your_url", type: "POST", data: your_data, success: function(response) { $("#content").load("your_page_to_refresh #content"); } }); ``` 以上代码会将"your_page_to_refresh"页面中id为"content"的元素的内容加载到当前页面的id为"content"的div元素中。 2. 使用jQuery的html方法替换内容: 在ajax请求成功的回调函数中,通过html方法将需要刷新的页面内容替换为返回的新内容。例如,假设需要刷新id为"content"的div元素,可以使用以下代码: ```javascript $.ajax({ url: "your_url", type: "POST", data: your_data, success: function(response) { $("#content").html(response); } }); ``` 以上代码会将返回的新内容替换当前页面id为"content"的div元素的内容。 3. 使用jQuery的append方法追加内容: 在ajax请求成功的回调函数中,通过append方法将返回的新内容追加到需要刷新的页面内容后面。例如,假设需要刷新id为"content"的div元素,可以使用以下代码: ```javascript $.ajax({ url: "your_url", type: "POST", data: your_data, success: function(response) { $("#content").append(response); } }); ``` 以上代码会将返回的新内容追加到当前页面id为"content"的div元素的末尾。 以上是三种常用的局部刷新页面的方法,根据实际需求选择适合的方法来刷新页面的局部内容。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值