HTML5 表单提交答案

【问题标题】：HTML5 Form SubmitHTML5 表单提交
【发布时间】：2015-11-23 21:01:23
【问题描述】：

我正在尝试获取一个表单以在不打开 IP 地址的情况下向 IP 地址提交操作。

所以，当我点击提交按钮时，我希望它发送 post 命令到 ip（在本例中为 192.168.0.1）并刷新当前页面。

<div data-role="main" class="ui-content">
<form method="POST" action="http://192.168.0.1/">
<input type="submit" name="parser" value="thisguy"/>
</form>
</div>

我在提交时运行的脚本：

<script src="http://ajax.googleapis.com/ajax/liubs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $('form.ajax').on('submit', function() {
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data - {};

        that.find('[name]').each(function() {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;

            $.ajax({
                url: url,
                type: method:,
                data: data,
                success: function(response) {}

            });

        });

        return false;
    });
</script>

现在它提交帖子并尝试将 192.168.0.1 作为网页打开。有人可以通过提供带有解释的代码或将我指向命令来帮助我吗？

感谢任何帮助。

【问题讨论】：

你的代码中有一个 type-o，在 "type: method:," 一个额外的冒号
为什么在通过 ajax 发送请求时使用表单？
那条data - {} 行又是怎么回事？问这个问题之前你用过JSHint吗？
如果您将 preventdefault() 添加到您的 ajax 函数中，页面将不会/需要刷新。如果您确实希望页面刷新，您可以在 ajax req 完成后编写 location =location。
@Xufox 我还没有，我现在正在运行代码！谢谢！

标签： javascript jquery ajax html forms

【解决方案1】：

您需要阻止默认操作（使用e.preventDefault()）

$('form.ajax').on('submit', function(e) {
    e.preventDefault(); // Prevent default submit action (that is, redirecting)
    var that = $(this),
        url = that.attr('action'),
        method = that.attr('method'),
        data = {};

    that.find('[name]').each(function() {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;

        $.ajax({
            url: url,
            type: method:,
            data: data,
            success: function(response) {}

        });

    });

    return false;
});

【讨论】：

我认为return false 就足够了。
@Flash preventDefault() 和 return false 不同 — 请参阅 stackoverflow.com/questions/1357118/…
@StephenP 应该是 event.preventDefault();或 e.preventDefault();?
@Jeremiah preventDefault() 是事件对象的一个方法。如果您的事件参数名称是 e 那么您确实可以将其调用为 e.preventDefault()
@Flash 在 jQuery 上下文中 return false 实际上比 preventDefault() 更“严重”，因为它也会导致 e.stopPropagation()，不仅阻止默认处理，而且阻止进一步的事件传播 - 请参阅 @987654323 @我之前链接的问题。从这个意义上说，我会说“preventDefault() 就足够了”并且返回 false 将是矫枉过正。在选择之前要问自己的问题是 - 你想阻止其他附加的处理程序运行吗？你想阻止事件冒泡吗？

【解决方案2】：

嗯，你可以在success方法中POST完成后刷新页面

success: function(response) {
  window.location.reload();
}

也不要忘记使用

禁用表单默认行为

 $('form.ajax').on('submit', function(event) {
   event.preventDefault();
   .
   .
 });

更多信息请见documentation

【讨论】：

【解决方案3】：

要启用调试，您应该将整个提交处理程序包装在 try/catch 中，因为没有它，错误将导致默认处理程序提交表单，从而掩盖错误。在 try/catch 之后你可以返回 false，所以页面保持不变。

<script src="http://ajax.googleapis.com/ajax/liubs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $('form.ajax').on('submit', function() {
        try {
            var that = $(this),
                url = that.attr('action'),
                method = that.attr('method'),
                data - {};

            that.find('[name]').each(function() {
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                data[name] = value;

                $.ajax({
                    url: url,
                    type: method:,
                    data: data,
                    success: function(response) {}

                });

            });
        }
        catch (err) {
            console.log( 'submit handler error: ' + err.message );
        }

        return false;
    });
</script>

【讨论】：

既然你提到了它，我认为如果你想避免使用 try/catch，我认为使用 e.preventDefault() 启动处理程序可能是一种替代方法。我从未尝试过。

【解决方案4】：

你只是有几个错字，比如-而不是=和额外的:，否则你的代码很好，下面是工作示例。

$(function(){
    $('form.ajax').on('submit', function() {
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data = {};

        that.find('[name]').each(function() {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;

            $.ajax({
                url: url,
                type: method,
                data: data,
                success: function(response) {
                 alert('posted')
                }

            });

        });

        return false;
    });
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div data-role="main" class="ui-content">
<form method="POST" action="http://192.168.0.1/" class="ajax">
<input type="submit" name="parser" value="thisguy"/>
</form>
</div>
My script that runs on submit:

【讨论】：

【解决方案5】：

我已对您的代码进行了更正。

<script language="javascript" type="text/javascript">
    $('form').on('submit', function(e) {
        e.preventDefault();
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data = {};

        that.find('[name]').each(function() {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;

            $.ajax({
                url: url,
                type: method,
                data: data,
                success: function(response) {}

            });

        });

        return false;
    });
</script>

【讨论】：

@TotalDotoNeto 谢谢！