问题:
基于的一次Ajax异步请求同时触发两件事件(一件是非预期的)。一是正常的ajax提交,二是非预期的表单自动提交。
最近在学习jQuery的ajax方法时,编写表单的post方法的异步请求时,发现原先绑定的标签的事件实现后会绑定一个表单的提交事件,同时后台日志发现有两个GET/POST请求,见代码:
$('#button').click(function () {
//button按钮在<form>里
var input1 = $("#input1").val();
var input2 = $("#input2").val();
var data =
{
key1: input1,
key2: input2
};
var send = JSON.stringify(data);
$.ajax(
{
url: '/test/',
type: 'POST',
data: send,
dataType:'json',
//后台用json.dumps提交后,这里dataType用json就不用再JSON.parse()了
success: function (result) {
console.log(result);
$("#field").text(result['newkey']);
},
error: function () {alert("回调失败");}
});
console.log(event.target.nodeName); //验证起作用的标签
console.log(event.target.id); //验证起作用的标签id
});
此时的type属性未设定,在按下这个按钮后,发现后台有两次的POST,第一次是我希望得到的,第二次是因为的type默认属性是submit导致的(谷歌和IE如此),因为表单提交默认的文件编码是"application/x-www-form-urlencoded",会被添加到request.body的请求体中:
b'name1=%E5%95%8A%E5%95%8A&name2=%E5%90%96%E7%9A%84'
这是用标签的name属性来构建的,在tornado中可用self.get_argument(“name”)获取。但后台我没有编写针对"application/x-www-form-urlencoded"编码的处理,正常是用JSON.stringify()转为字符串再提交后台的,因为编码的问题,导致后台出错并在前台空白页面反馈错误。
解决:
经过查阅资料,在不知道原因的情况下我使用了preventDefault():
$('#button').click(function (event) {
var input1 = $("#input1").val();
var input2 = $("#input2").val();
var data =
{
key1: input1,
key2: input2
};
var send = JSON.stringify(data);
$.ajax(
{
url: '/test/',
type: 'POST',
data: send,
dataType:'json',
success: function (result) {
console.log(result);
$("#field").text(result['newkey']);
},
error: function () {alert("回调失败");}
});
console.log(event.target.nodeName); //验证起作用的标签
console.log(event.target.id); //验证起作用的标签id
event.preventDefault();
});
此方法可行,没有报错,阻止了基于自带submit属性的提交。附上此方法的介绍:
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。https://m.jb51.net/w3school/jquery/event_preventdefault.htm
这种方法只是治标不治本,但不愿放弃的我还是找到了最终的解决办法:给设置type属性为button,至此全部搞定!
以及记录一下我的学习成果。