jQuery Mobile - 如何将表单提交到 URL 并传输到 DOM 内的另一个页面？

Posted 2023-05-09

【中文标题】jQuery Mobile - 如何将表单提交到 URL 并传输到 DOM 内的另一个页面？

【英文标题】：jQuery Mobile - how do I submit forms to a URL and transit to another page inside the DOM?

【发布时间】：2011-12-06 01:17:21

【问题描述】：

在 jQuery 移动示例中。提交表单后显示的页面与表单将要 POST/GET 到的页面相同。

是否可以将表单提交到 URL 并传输到 DOM 内的另一个页面？

【参考方案1】：

您可以为表单的submit 事件添加事件处理程序并手动提交表单，然后手动转换到您想要的任何页面。

$(function () 
    $('#form_id').bind('submit', function (e) 
        e.preventDefault();
        $.post('path/to/file.php', $(this).serialize(), function (response) 
            $.mobile.changePage('#page_to_goto', transition: 'slide');
        );
    );
);

一些注意事项：

您可能需要通过将data-ajax="false" 添加到表单标签来关闭表单的AJAX 处理。 e.preventDefault() 阻止表单正常提交，事件处理程序末尾的 return false; 应该做同样的事情。 $.post - http://api.jquery.com/jQuery.post/ .serialize() - http://api.jquery.com/serialize/ $.mobile.changePage() - http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

【讨论】：

谢谢！实际上，我发现了这个问题，但堆栈溢出不允许我在发布问题后 8 小时内发布。但是你的ans教了一些我不知道的东西。所以..谢谢！

这种情况下的 HTML 是什么样子的？表单标签是否需要任何操作或方法？

@xster 在这种情况下我们使用e.preventDefault() 来停止表单的正常提交。所以到那时，由我们来做一些会导致用户看到的事情。那就是我们使用 AJAX $.post 方法将表单提交到指定的 URL（如果您不想硬编码此 URL，可以使用表单的 action 属性）。因此，该方法是由我们使用$.post() 方法的事实设置的，并且该操作设置为传递给$.post() 方法的URL。但是，您可以再次读取form 标签的method 属性，而不是对方法进行硬编码。