如何在 jquery POST 中将 enctype 作为 multipart/form-data 发送答案

【问题标题】：How to send enctype as multipart/form-data in jquery POST如何在 jquery POST 中将 enctype 作为 multipart/form-data 发送
【发布时间】：2013-12-02 06:07:39
【问题描述】：

我知道有很多关于将表单编码为 multipart/form-data 的问题，但似乎大多数都与上传文件有关。 我对上传文件不感兴趣；我也没有实际的表单。 我只有一个按钮，点击时会调用以下函数：

$.post("http://html5.validator.nu/",
{
    headers: { 'Content-Type': 'multipart/form-data' }, //this doesn't work !
    content:"<!DOCTYPE html>"//the value of content doesn't matter at the moment
},
function(data){
    print(data);
});

AJAX 请求执行，但来自 validator.nu（服务器）的响应是这样的：

application/x-www-form-urlencoded not supported. Please use multipart/form-data

如何在没有实际表单的情况下使用 multipart/form-data 对表单进行编码（仅在查询中）？我可以在请求中添加一两行来执行此操作吗？谢谢

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

"multipart/form-data" 对 httpd 的重要性不如对 UA 的重要性。您的浏览器看到enctype="multipart/form-data" 并进行特殊处理，其中最重要的部分在于它塑造了发送到 httpd 的 MIME 请求的方式。

以下是实际multipart/form-data HTTP 请求中最相关的部分（使用requestb.in 捕获）：

内容长度：533

内容类型：multipart/form-data；边界=----WebKitFormBoundaryEknFTYZrogVNxemQ

------WebKitFormBoundaryEknFTYZrogVNxemQ

内容配置：表单数据；名称=“富”；文件名="foo.png"

内容类型：图片/png

PNG

[省略PNG数据]

------WebKitFormBoundaryEknFTYZrogVNxemQ

内容配置：表单数据； name="提交"

提交

------WebKitFormBoundaryEknFTYZrogVNxemQ--

话虽如此，构建这些 MIME 部分可能有点像 PITA，所以如果你能找到一个库来为你做这件事（例如 @Innovation 建议的库），它可能值得研究。

【讨论】：

【解决方案2】：

我在访问validator.nu 时得到了相同的响应使用 jQuery.post 或 $.ajax 命令并决定用尽各种方法后不要使用 jQuery 可能的 ajax 参数配置。它出现 validator.nu API 比其他 API 更挑剔关于它从 jQuery 接收到的格式。

适用于的非 jQuery javascript 命令我是FormData 和Append。

注意 API 要求也很重要可在：
github dot com/validator/validator/wiki

完整代码见：
https://github.com/VividVenturesLLC/validatorNu-JSwebServiceAPI

// Following code formatted to fit in the
// response text area, some lines may fail
// syntax check!

//Initialize some variables
//the entire script is written around the API of validator.nu webservice
var validate = 'https://validator.nu';

//  developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
var formData = new FormData();
//  developer.mozilla.org/en-US/docs/Web/API/FormData/append
formData.append('charset','UTF-8');
formData.append('out','json');
formData.append('laxtype','yes');
formData.append('parser','html5');

// developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
// JavaScript file-like object...
var blob = new Blob([currentPageMarkup], { type: "text/html"});
formData.append("content", blob);

var oXHR = new XMLHttpRequest();
var validationTestResults = null;//expect response from validate webservice
oXHR.onreadystatechange = function(){
if (oXHR.readyState===1){//OPENED
    console.log("<------- Opened communication at: " + validate +
                " in script: test_valid_html.js -------------->");
}
if (oXHR.readyState===2){//HEADERS_RECEIVED
    console.log("<------- Received AJAX headers from: " + validate +
                " in script: test_valid_html.js -------------->");
}
if (oXHR.readyState===4){//done
    console.log('oXHR.response: ' + oXHR.response);
    //requested a response in JSON format
    validationTestResults = JSON.parse(oXHR.response);
    displayMessages(validationTestResults);//custom display function
    var vtrStatus = getStatus(validationTestResults);
    /* put id=validation_log in a tag in the web page under
       test to output the results because
       remember all the variables lose scope when 
       leaving this function
    */
    //document.getElementById("validation_log").innerHTML=vtrStatus;

    console.log("HTML5 validation status: " + vtrStatus);// this is the message you want
    console.log("<------- Ending AJAX call in script: test_valid_html.js -------------->");
    }
};//end onreadystate change

oXHR.open("POST", validate);
oXHR.send(formData);

【讨论】：