在 javascript 中发送带有“FormData()”的表单，无法正确显示 html 响应。为什么？答案

【问题标题】：Sending a form with "FormData()" in javascript, does not display html response correctly. Why?在 javascript 中发送带有“FormData()”的表单，无法正确显示 html 响应。为什么？
【发布时间】：2018-04-12 19:59:14
【问题描述】：

我正在使用两种不同的方法发送表单。

但是浏览器不显示方法2中从服务器返回的html内容。

形式：

<form name="form1" method="POST" action="http://localhost:8080/return_form/sayform" ><input name="refid"  value="33862136">

方法一：（表格，提交）

<button type="button" onclick="document.form1.submit()">POST Data</button>

结果 1：

浏览器 POST 表单到服务器，服务器响应 HTML 内容，浏览器根据服务器响应显示 HTML 内容。

方法2：（JavaScript函数，使用“FormData”和“XMLHttpRequest”）

function Send() {
   var data = new FormData();
   data.append("refid", "33862136");
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://localhost:8080/return_form/sayform", false);
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         //do some thing
      }
   };
   xhr.send(data);
};`


<button type="button" onclick="Send()">POST Data</button>

结果 2：

浏览器发布带有标题的表单

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryOdbZ7kv4ZlCRmEkk

并请求有效载荷

------WebKitFormBoundaryOdbZ7kv4ZlCRmEkk    
Content-Disposition: form-data; name="refid"
33862136
------WebKitFormBoundaryOdbZ7kv4ZlCRmEkk--

和服务器响应 HTML 内容（与方法 1 服务器响应完全一样），但浏览器不显示 HTML 内容。

【问题讨论】：

标签： javascript html xmlhttprequest

【解决方案1】：

Ajax 的全部意义在于响应由您编写的 JavaScript 处理，而不是通过自动将其显示为新页面。

如果你想对结果做点什么，那么你需要编写代码来做到这一点：在你写//do some thing的地方。

如果您确实想将其显示为新页面：不要使用 Ajax。

【讨论】：