记一次Bootstrap框架下 使用Ajax失效的问题

最近写一个简单的后台管理系统,前台是套用的一套Bootstrap框架的一套模板。在HTML页面的模板上,用一些简单的jquery脚本,使用JSP页面完成前后台交互。

在写到一个AJAX请求的时候,发现AJAX请求可以到后台,但是返回不了JSON数据,页面最后的效果是刷新当前页面,还把参数给刷没了。。

经检查,发现自己绑定事件的button标签在form表单里,也就是在form表单里的button 默认是会刷新当前页面。

解决方法如下:

1.如果不强制要求 button 在form表单里,把form表单去掉就可以了

2. 非要在form  表单里 给 button加上  type="button"  属性

3.  在绑定的事件中 这样写:

$(‘btn‘).click(function(e){

e.preventDefult();

});

原文地址:https://www.cnblogs.com/caijiwdq/p/10867317.html

时间: 2024-08-30 02:50:51

记一次Bootstrap框架下 使用Ajax失效的问题的相关文章

spring +mybatis+strut2框架下 实现ajax跨域访问的问题

做项目中遇到一个ajax跨域请求的问题,在网上找了很多,这个介绍的相对详细一点儿,但是后台处理跟我的还有一点儿不一样,特贴出来,以供参考. 1:action中是一般常用方式: 2:在struts的配置文件中增加一条 <param name="callbackParameter">callback</param> 3:在ajax中修改原来json为jsonp,再增加两个属性 jsonp:"callback", jsonpCallback:&qu

SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId>

Bootstrap框架下按钮的禁用

禁用button $('button').addClass('disabled'); // 按钮灰掉,但仍可点击. $('button').prop('disabled', true); // 按钮灰掉,且不可点击. 禁用类型为button的input按钮 $('input[value=下一页]').addClass('disabled'); // 按钮灰掉,但仍可点击. $('input[value=下一页]').prop('disabled', true); // 按钮灰掉且不可点击. 原文

yii框架下使用bootstrap时,判断checkbox、radioButtonList和dropDownList的js方法

1.首先设置button按钮的id: <span style="font-size:14px;">'htmlOptions'=>array('id'=>'buttonStateful')</span> 例如: <span style="font-size:14px;"> <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=

bootstrap框架

bootstrap框架: bootstrap是一套现成的CSS样式集合.能够简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 包含了哪些文件: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min

框架基础:ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础:ajax设计方案(一)---集成核心请求

框架基础:ajax设计方案(一)---集成核心请求 框架基础:ajax设计方案(一)---集成核心请求 报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉唉唉唉唉 报告,我要说话!Jquery太丰富了,老子只用了几个功能,妈的,太不划算了,啊啊啊啊啊啊 ...... 好了,言归正传.对于想到整理ajax设计方案,原因如下: 从资源合理利用的角度以及

记一次Nancy 框架中遇到的坑

记一次Nancy 框架中遇到的坑 前几天,公司一个项目运行很久的Nancy框架的网站,遇到了一个很诡异的问题.Session 对象跳转到另外一个页面的时候,session对象被清空了,导致用户登录不上.搞了两天,终于解决了.于是把它记录下来,以避免其他人也碰到这种情况. 起因 公司一个Nancy 框架 开发的web网站,以前一直都是好的,nancy 框架也用在了很多项目里面,基本上已经很成熟很稳定了,但是在前几天发布某个web网站的时候,竟然出现部分用户登录不上的情况.刚开始以为是人员的权限有问

Bootstrap框架的学习(一)

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.