《form表单中的按钮和不在表单中的按钮》

在自学API的时候，自己写了前台来调用测试API，然后在前台表单中写了按钮id="up1"（没有指定submmit类型），表单外也写了一个按钮id="up2"

<div>
        <form>
            订单号:<input type="text" name="orderId" id="orderId"/>
            <br /><br />
            运单号:<input type="text" name="mailNo" id="mailNo"/>
            <br /><br />
            源地址:<input type="text" name="origincode" id="origincode"/>
            <br /><br />
            目的地:<input type="text" name="destcode" id="destcode"/>
            <br /><br />
            筛选结果:<input type="radio" name="filterResult" id="filterResult" value="1" />人工确认
            <input type="radio" name="filterResult" id="filterResult" value="2"  />可收派
            <input type="radio" name="filterResult" id="filterResult" value="3" />不可收派
            <br /><br />
            签回单号：<input type="text" name="returnTrackingNo" id="returnTrackingNo"  />
            <br /><br />
            <button id="up1">提交1</button>
        </form>
    </div>
    <div>
        <button id="up2">提交2</button>
    </div>

然后给两个按钮同时绑定了一个单击事件，在事件中通过ajax进行访问写好的API

 $("#up1,#up2").click(function () {
                //var postdata = { orderId: $("#orderId").val(), mailNo:$("#mailNo").val(), origincode: $("#origincode").val(), destcode: $("#destcode").val(), filterResult: $("#filterResult").val(), returnTrackingNo: $("#returnTrackingNo").val() }
                $.ajax({
                    type: "get",
                    url: "/api/sf/Getffff",
                    contentType: "application/json",
                    //data: JSON.stringify(postdata),
                    success: function (data, status) { 
                        if(status=="success") 
                        {
                            alert("33")
                        }
                        }
                })
            })

下面是API的代码（没有任何功能，只是单纯的演示）

 [HttpGet]
 public string Getffff()
{
     return "";
 }

当运行前台页面点击按钮id="up1"的时候，

 

会正确运行API，并且弹框显示，但是，当点击弹框上的确定按钮的时候，页面就会自动刷新，并且有这个警告

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

大致意思就是把一个http请求放到了主线程上来执行，影响了用户体验。

这是点击按钮后的地址栏信息

http://localhost:61439/SFMVC/OrderResult?orderId=&mailNo=&origincode=&destcode=&returnTrackingNo=

看到浏览器的地址栏才知道，在form中的按钮，会自动向后台提交表单中的数据，执行submmit类型的提交，不论有没有指定action。

但是单击在表单外的id=“up2”的按钮，会正常调用API，并且弹框，没有之后的刷新页面，也没有任何的警告信息。

解决方案：

像这种在表单中的按钮的提交想要正确执行的话，需要在form中指定 onsubmit="return false"就可以了，这样就是先执行按钮的绑定的单击事件，然后再执行表单的提交的时候，就不会再次刷新页面了。

<form  onsubmit="return false">