发布带有 ajax 和未知表单字段的表单答案

【问题标题】：Posting a form with ajax and unknown form fields发布带有 ajax 和未知表单字段的表单
【发布时间】：2015-01-17 23:12:36
【问题描述】：

使用 jQuery 将数据发布到使用 ajax 的服务器非常简单。

是否有一个 jquery 函数可以使用表单名称发布表单并像其他传统的 ajax 发布调用一样从服务器接收状态。

但是，如果我们只是想通过其名称或 ID 发布一个表单，而我有一组未知的表单域。

我想做的是获取页面上的表单，然后提交表单和当前数据

查看示例代码：

HTML

<form name='myform'>
    <input type='hidden' value='1' name='somefield'>
    <input type='hidden' value='2' name='somefield2'>
    <input type='hidden' value='3' name='somefield3'>

</form>

<a href='#' class='postform' form_name='myform'>post using ajax</a>

$('.postform').click( function() {

    form_name = $(this).attr('form_name');

    postto = 'http://mysite-endpoint.com/api';

    form = $(form_name).submit(postto).done(function(data)
    {
        var ndata = jQuery.parseJSON(data);

        if(ndata.status=='error')
        {
            //display error
        }

        if(ndata.status=='success')
        {
            //looks good
        }
    });

    return false;
});

【问题讨论】：

你的问题是？
是否有 jquery 函数可以做到这一点？
做什么？您的帖子不清楚。
$('form[name="form_name"]').submit() 但最好使用 id - $('#form_id').submit()。
OP 已经使用了.submit()，所以目前还不清楚实际问题是什么。

标签： javascript jquery ajax forms

【解决方案1】：

您可以使用jQuery $.serialize() 标记表单并根据表单属性提交。像这样的：

$('#someform').submit(function(ev) {
    ev.preventDefault();
    var $form = $(this);

    $.ajax($form.attr('action'), {
        type: $form.attr('method') || 'get',
        data: $form.serialize(),
    }).then(function() {
        alert('success');
    }, function() {
        alert('error');
    });
});

Here's a fiddle.

【讨论】：

是的！这看起来像我所追求的。 Ajax 发送和接收响应。所以jQ有serialize()。嗯
这里还需要提交事件吗？链接上的 onclick 事件也可以这样做。
@Mouser 最好使用 FORM 的提交事件以获得更好的跨浏览器支持，特别是如果用户在 FORM 内的输入上按下 return 键或在外部按钮上使用属性 form FORM 但实际上取决于 OP 正在寻找的关于这种行为的内容。编辑：我明白了，FORM 只包含隐藏的输入，所以，这里没有什么问题，只使用点击事件
非常感谢大家。我特别喜欢type: $form.attr('method') || 'get', 行来获取默认方法。抱歉，说到 jQ，我真是个菜鸟。