我在表单中间有一个按钮,我想通过 ajax 获取一些信息。我已经创建了一个函数并且按钮设置如下:
<button id="class-list" onclick="updateMc()" class="btn btn-warning" style="margin: 0;">Update MC</button>
我有这样的功能设置:但这仍然会提交表单。
function updateMc(event){
event.preventDefault();
var companyMc = $('#company_mc').val();
$.ajax({
type: "POST",
url: "/saferscrapers",
data: {
'company_mc': companyMc
},
complete: function(response) {
var responseText = response.responseText;
var json = jQuery.parseJSON(responseText);
for (var key in json){
if (json[key] != '') {
var element = document.getElementById(key);
if (element.type == 'checkbox') {
element.checked = (json[key] == "true");
element.value = (json[key] == "true" ? '1' : '0' );
}
else {
element.value = json[key];
}
}
}
}
});
}
最佳答案
你有两个选择:
将事件参数传递给函数:
<button id="class-list" onclick="updateMc(event)" class="btn btn-warning" style="margin: 0;">Update MC</button> <!-- Note --------------------------------^^^^^ -->
这适用于现代浏览器的跨浏览器,因为即使在没有全局
event
的浏览器上也是如此, 有一个event
在生成函数的范围内onclick
创造。但请注意,它不适用于旧版 IE(IE8 及更早版本)或处于“兼容模式”的 IE 会自行崩溃,因为旧版 IE 没有
preventDefault
事件对象上的方法。另请注意,使用
onXyz
attributes 要求你的函数是全局的,而全局命名空间已经很拥挤了。使用现代事件处理技术动态
正确连接处理程序:<button id="class-list" class="btn btn-warning" style="margin: 0;">Update MC</button>
然后:
$("#class-list").on("click", updateMc);
考虑到解决方案 #1 的问题,我会使用解决方案 #2。
关于javascript - 在函数中使用 preventDefault() 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30920027/