从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是潜在有效的ID之后,它仍然用于getElementById查找节点.