javascript - 从 Jquery submit() 获取 HTMLFormElement 对象

Question

所以我有这个捕获提交的片段:

$(function(){
    $('#xhr2_form').submit(function(e){
        e.preventDefault();
        sendForm();
    });
});    

此代码段用于应用 XHR 2 表单提交

var xhr = new XMLHttpRequest();

function sendForm() {
    var myForm = $('#xhr2_form');

    // get fields
    var values = {};
    $.each($('#xhr2_form').serializeArray(), function(i, field){
        values[field.name] = $(this).val();
    });

    // append data
    var formData = new FormData(myForm);
    formData.append('type',values['type']);

    xhr.open('POST', '/test/xhr2', true);
    xhr.onload = function(e){};

    xhr.send(formData);
}

问题是 FormData 的 api 接受一个 HtmlFormElement，如下所述:

http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-formdata-interface

问题是我试图从 Jquery 的提交事件中检索 HTMLFormElement，但我不知道如何检索。

没有 JS，这是如何完成的:

<form id="myform" name="myform" action="/server">
  <input type="text" name="username" value="johndoe">
  <input type="number" name="id" value="123456">
  <input type="submit" onclick="return sendForm(this.form);">
</form>

function sendForm(form) {
  var formData = new FormData(form);

  formData.append('secret_token', '1234567890'); // Append extra data before send.

  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);

  return false; // Prevent page from submitting.
}

那么如何在 Jquery 中获取 HTMLFormElement？

Answer 1

问题仅仅是您提供的是 jQuery 对象而不是 DOM 节点吗？如果是这种情况，您只需从对象中检索第一个元素就可以了，它(除非您有一些无效的东西，例如页面上的另一个 xhr2_form )将为您提供您正在寻找的表单元素.

function sendForm() {
  var myForm = $('#xhr2_form'); // this is a jQuery object

  // ...

  /*
   *  myForm is a jQuery object
   *  myForm[0] is the first element of the object, in this case whichever
   *    node has the ID "xhr2_form"
   */
  var formData = new FormData(myForm[0]);

  // ...
}

您也可以像这样使用 .get(不要与 $.get 混淆)检索它:

$("#xhr2_form").get(0);  // or myForm.get(0);

此外，作为旁注，当您使用 jQuery 搜索 ID 时，例如 $("#some_id")，在确定 some_id is a potentially valid ID 之后，它是 uses getElementById to find the node anyway 。