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

jsp页面ajax代码如下:

$("#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.ajax提交并实现单个div刷新的更多相关文章

  1. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  2. 继上篇-jquery ajax提交 本篇用ajax提交的数据去数据库查询

    上篇讲到如何用jquery ajax提交数据至后台,后台接收并返回给ajax.https://www.cnblogs.com/tiezhuxiong/p/11943328.html 今天我们把数据传到 ...

  3. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  4. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  5. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  6. form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  7. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. 诅咒JavaScript之:Jquery ajax提交内容异常

    jquery ajax 通过url提交内容,在服务器端获取却出现很奇怪的值,代码如下: ajaxurl = "aspx/logTable.ashx?action=load&Every ...

随机推荐

  1. Python作用域-->闭包函数-->装饰器

    1.作用域: 在python中,作用域分为两种:全局作用域和局部作用域. 全局作用域是定义在文件级别的变量,函数名.而局部作用域,则是定义函数内部. 关于作用域,我要理解两点:a.在全局不能访问到局部 ...

  2. ui-select : There is no "X"(delete button) with selectize theme, when allow-clear="true"

    but add allow-clear="true"For Bootstrap and Select2 themes, it's working perfectly. reason ...

  3. HALCON里面的一维测量。

    第一步:将图片导入, 拿到图片的名字 和窗口的句柄 第二步:创建一个测量区域.这个测量区域是一个矩形,假设他的名字叫A gen_measure_rectangle2 (TmpCtrl_Row,//输入 ...

  4. Python 集合(set)的使用总结

    集合的特点:去重.无序,因此无法通过下标取值. 1. 定义集合 s = set() #定义空的集合 s2 = {'} # 不是key -value形式的话就是集合,不是字典 s3 ={'} print ...

  5. python字符串的操作(去掉空格strip(),切片,查找,连接join(),分割split(),转换首字母大写, 转换字母大小写...)

    #可变变量:list, 字典#不可变变量:元祖,字符串字符串的操作(去掉空格, 切片, 查找, 连接, 分割, 转换首字母大写, 转换字母大小写, 判断是否是数字字母, 成员运算符(in / not ...

  6. Jmeter 之下载图片

    利用Jmeter实现文件图片下载 步骤: 1. 新建线程组 2. 线程组右键新建HTTP请求: 添加服务器名称或IP, 路径,协议,方法,端口等信息 3. 线程组右键新建 BeanShell Samp ...

  7. js 有小数点数据求和多出小数点问题记录

    >> +192.92 << 492.91999999999996 >> (*+)/ << 492.92 做统计汇总时,页面加和,展示出一堆的小数点. 网 ...

  8. 错误:程序“XXX”不包含适合于入口点的静态“Main”方法

    解决办法: 1.右键类库属性 2.将输出类型改为“类库”

  9. 4-es6的模块化编程

    诞生背景其他都是第三方库,只有es才是官方正宗的,如果es早就制定的话,也不至于现在的这么百花齐放(混乱)的局面了 核心规范一个文件就是一个模块export是暴露出模块的公开方法import是导入 实 ...

  10. tomcat源码调试2

    前面对tomcat做了一些简单的认识,下面将tomcat源码调试环境搭建起来. 可以参考官网的搭建方法,这里是按照网上的maven管理的方式搭建. 大概步骤是: 1.下载tomcat 9的源码,一般是 ...