关于js表单提交与jquery表单提交

我今天在做一个导出excel的功能，前面导出一直出现像乱码一样的东西。就是这个结果：

然后我使劲检查，就是找不到问题所在，因为我前面也做过导出，同一个项目，于是将前面的代码进行比对，一点一点同步，最后发现不同点在这个代码：

<script type="text/javascript">
    $(function () {
        $("#exportChannelSettleAccounts").click(function () {
            <%--var form1 = $("#pagerForm[name='settleAccountsForm']");--%>
            <%--form1.attr("action", "${pageContext.request.contextPath}/urgent/business/settle_accounts/export");--%>
            <%--form1.submit();--%>
            <%--form1.attr("action", "${pageContext.request.contextPath}/urgent/business/settle_accounts/query");--%>

            settleAccountsForm.action = '${pageContext.request.contextPath}/urgent/business/settle_accounts/export';
            settleAccountsForm.submit();
            settleAccountsForm.action = '${pageContext.request.contextPath}/urgent/business/settle_accounts/query';
        });
    });
</script>

前面我使用的是注释的内容，一直出问题，后面改成下面这样就ok了。

我的前端框架使用的是bjui，这个是一个ajax操作，ajaxsearch。也就是封装的这个表单提交会异步刷新页面。

我的怀疑是：selector().submit()不会触发bjui框架内置的封装表单异步提交。

 

经过大牛提醒，我检查两次请求的request，正确导出的request为：

Request URL:http://localhost:8080/urgent/business/settle_accounts/export
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Content-Disposition:attachment; filename=channelSettleAccountsMessage.zip
Content-Type:APPLICATION/OCTET-STREAM; charset=UTF-8
Server:Jetty(6.1.26)
Transfer-Encoding:chunked
Request Headers
view source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:116
Content-Type:application/x-www-form-urlencoded
Cookie:JSESSIONID=1i03gd31dgpnifz7whqyv5p63; bjui_theme=blue
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/main
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Form Data
view source
view URL encoded
pageSize:30
pageCurrent:1
billSeqNo:
borrowerName:
borrowerPhone:
urgentRecallStage:
startRecallDate:
endRecallDate:

出现类似乱码的request为：

Request URL:http://localhost:8080/urgent/business/settle_accounts/export
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Content-Disposition:attachment; filename=channelSettleAccountsMessage.zip
Content-Type:APPLICATION/OCTET-STREAM; charset=UTF-8
Server:Jetty(6.1.26)
Transfer-Encoding:chunked
Request Headers
view source
Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:151
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:JSESSIONID=1i03gd31dgpnifz7whqyv5p63; bjui_theme=blue
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/main
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Data
view source
view URL encoded
pageSize:30
pageCurrent:1
billSeqNo:
borrowerName:
borrowerPhone:
urgentRecallStage:
startRecallDate:
endRecallDate:
orderField:
orderDirection:
total:

 

两个request头的主要区别在于：

X-Requested-With:XMLHttpRequest

 

x-requested-with  XMLHttpRequest是Ajax 异步请求方式
使用
request.getHeader("x-requested-with");
 为 null，则为传统同步请求；
为 XMLHttpRequest，则为 Ajax 异步请求。

 

导出要的就是ajax，为什么后面的会出问题呢？我使用的是bjui框架，这个表单使用的是ajaxsearch组件，对于这个框架的源码我没有看。根据现象推测：form.formName.submit()提交之后会走bjui封装的ajax方法，将数据包装下，使用ajax发送到服务器。然后selector().submit();也是jquery的，直接就提交表单了。bjui框架底层是使用jqueryUI和Bootstrap结合生成的框架。