一次ajax触发，非预期触发表单提交——＜button＞标签的坑：自带submit属性

问题：

基于的一次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，至此全部搞定！

以及记录一下我的学习成果。