Javascript 使用vanilla js提交ajaxForm的表单

我正在从iOS应用程序向web应用程序注入JS。我控制这两个的代码。我正在尝试编写javascript，它从条形码扫描仪获取输入，然后将其放入web表单，然后提交表单。我使用该插件使所有表单成为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;
    }
}

var scan_id=['item'，'search']；
对于（var k=0；k为了使用香草/普通JS提交表单，只需调用表单上的
submit
方法：

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

但是，听起来好像您想要发出一个AJAX请求。这些请求不同于标准HTTP请求。它们被称为

当您使用普通HTTP请求提交表单时（当您使用
form.submit（）
时会发生什么情况），浏览器会使用正在发送的
中的信息填充发送到服务器的POST/GET变量

发送XMLHttp请求时，这项工作不是为您完成的。您必须自己完成

据我所知，这是我们正在做的大部分工作。它收集表单中的信息，填充XMLHttp请求，然后使用所谓的AJAX技术将表单提交给服务器

您可能会发现这个答案很有用；有人编写了一个简单的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);
}

可能值得注意的是，这段代码的原始海报使用的方法在一些旧浏览器上不起作用，尤其是不支持该实现的浏览器

我的建议是坚持使用你已经拥有的插件。我看不出有什么理由重新发明轮子。请放心，你的jQuery库正在幕后使用vanilla Javascript。
你的问题是什么？你是在问你是否可以在不使用库/框架的情况下提交vanilla JS表单？正确。但我正在尝试o在不知道表单或使用jQuery的情况下进行操作。只要一个id（如果可能的话）。请参阅if（scan_id='item'）道歉中的最后一行，我以前不理解。好的，那么你想用简单的JS提交表单，但通过AJAX？我想我完全像
$（'#add_item_form'）。提交（）；
在jQuery中，表单实际上使用的是ajaxForm，但我不需要知道它是如何工作的。vanilla js中有没有这样的工作方式？我可以问一下为什么要使用vanilla js来完成这项工作吗？你基本上是在重新编写一个已经工作的模块。我在Chrome 53.0.2785.116版（64位）中测试了这一点对于输入字段，el.checked等于false。因此，我将此
|el.type！==“checkbox”| el.type！==“radio”
添加到该行。我不想编辑此文章而不首先发表此评论。您是否认为，有必要检查
类型（el.checked）==“undefined”
？显示那些
。过滤器（功能（el）{…}
方法需要右括号。第21、22行。谢谢你的回答！@danfo发现得很好。谢谢
！在过滤器中禁用el
。