javascript - 使用 vanilla js 提交 ajaxForm 表单

Question

我正在将 JS 从 iOS 应用程序注入(inject)到网络应用程序。我控制两者的代码。我正在尝试编写 javascript，它从条形码扫描仪获取输入，然后将其放入 Web 表单中，然后提交表单。我用 jQuery.form使所有表单成为ajax的插件。我使用 ajaxForm。

我想让代码尽可能通用，以防我更改前端代码(例如删除 ajaxForm)。我的目标是简单地拥有一组 id，当它与 id 匹配时更改输入的值，然后提交表单。这种形式可以是 ajax 或常规形式；但 iOS 应用程序不应该知道实现细节。有没有办法在 vanilla js 中做到这一点？

var scan_ids = ['item','search'];

for(var k=0;k<scan_ids.length;k++)
{
    var scan_id = scan_ids[k];

    if (document.getElementById(scan_id))
    {
        document.getElementById(scan_id).value = "[SCAN]";

        if (scan_id == "item")
        {
             /*I don't want to do this as I am bound to ajaxSubmit; 
I would rather trigger a form submit and have it use ajaxForm
 that is bound to it. If I do .submit() it ignores the ajaxForm */

            $('#add_item_form').ajaxSubmit({target: "#register_container", beforeSubmit: salesBeforeSubmit, success:itemScannedSuccess});


        $('#add_item_form').submit(); //(WORKS and submits via ajax)
        document.getElementById('add_item_form').submit(); //(SUBMITS; DOES NOT AJAX)
        }

        break;
    }
}

Answer 1

为了使用 vanilla/plain JS 提交表单，只需调用 submit表单上的方法:

document.getElementById('formId').submit();

但是，听起来您想发出 AJAX 请求。这些不同于标准的 HTTP 请求。他们被称为XMLHttp Requests .

当您使用纯 HTTP 请求提交表单时(使用 form.submit() 时会发生什么)，浏览器会使用 <form> 中的信息填充发送到服务器的 POST/GET 变量正在发送。

当发送 XMLHttp 请求时，这项工作并没有为您完成。你必须自己做。

据我所知，这是 jQuery.form 的大部分内容是在做。它收集表单中的信息，填充 XMLHttp 请求，然后使用所谓的 AJAX 技术将表单提交到服务器。

您可能会发现 this回答有用；有人编写了一个简单的 Javascript 方法来通过 AJAX 提交表单。这是该答案的方法:

/**
 * Takes a form node and sends it over AJAX.
 * @param {HTMLFormElement} form - Form node to send
 * @param {function} callback - Function to handle onload. 
 *                              this variable will be bound correctly.
 */

function ajaxPost (form, callback) {
    var url = form.action,
        xhr = new XMLHttpRequest();

    //This is a bit tricky, [].fn.call(form.elements, ...) allows us to call .fn
    //on the form's elements, even though it's not an array. Effectively
    //Filtering all of the fields on the form
    var params = [].filter.call(form.elements, function(el) {
        //Allow only elements that don't have the 'checked' property
        //Or those who have it, and it's checked for them.
        return typeof(el.checked) === 'undefined' || el.checked;
        //Practically, filter out checkboxes/radios which aren't checekd.
    })
    .filter(function(el) { return !!el.name; }) //Nameless elements die.
    .filter(function(el) { return !el.disabled; }) //Disabled elements die.
    .map(function(el) {
        //Map each field into a name=value string, make sure to properly escape!
        return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
    }).join('&'); //Then join all the strings by &

    xhr.open("POST", url);
    xhr.setRequestHeader("Content-type", "application/x-form-urlencoded");

    //.bind ensures that this inside of the function is the XHR object.
    xhr.onload = callback.bind(xhr); 

    //All preperations are clear, send the request!
    xhr.send(params);
}

可能值得注意的是，此代码的原始发布者使用的方法不适用于某些较旧的浏览器。特别是不支持 ECMAScript 5 的浏览器实现。

我的建议是坚持使用您已有的插件。我看不出重新发明轮子的理由。请放心，您的 jQuery 库在底层使用的是 vanilla Javascript。