将表单提交到同一页面而不重新加载答案

【问题标题】：Submitting a form to the same page without reloading it将表单提交到同一页面而不重新加载
【发布时间】：2015-05-16 01:41:21
【问题描述】：

我正在尝试使用 Ajax 发送表单而不刷新页面。表单提交到同一页面很重要，这就是我使用url: 'customer-management?form_sent=yes' 的原因。

HTML：

<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">    
      <i onclick="$(this).closest(\'form\').submit()" id="' . $get_uncontacted_member->id . '" class="fa fa-phone-square called"></i>
</form>

JS：

$('.called').click(function() {
    $.ajax({
        type: 'post',
        url: 'customer-management?form_sent=yes',
        data: $(this).attr('id');
        success: function(r) {
            alert(r);
        } 
    })
})

PHP：

if (isset($_POST['form_sent']) && $_POST['form_sent'] === 'yes') { return 'That worked!' }

页面重新加载，我想我做错了。

【问题讨论】：

删除这个onclick="$(this).closest(\'form\').submit()"。那就是重新加载页面。
@StephenBugsKamenar 真的，谢谢！但我仍然没有收到警报。
您的 html 中有 onclick="$(this).closest(\'form\').submit()" 和 javascript 中有 $('.called').click(function() { });？为什么两者都有？此外，在任何一个中，您都不会阻止默认表单提交。尝试在您的 $('.called').click(function() { }); 代码中添加 event.preventDefault();
我相信你只是想使用 AJAX 这里是一个例子stackoverflow.com/questions/16323360/…

标签： javascript php jquery html ajax

【解决方案1】：

您没有正确传递数据。由于您正在执行 POST 请求，因此不应将数据作为查询字符串传递。相反，通过 data 属性传递它。另外，添加return false;，这样表单就不会提交了。

$.ajax({
    type: 'post',
    url: 'customer-management',
    data: { form_sent: 'yes' },
    success: function(r) {
        alert(r);
    } 
});

return false;

您可以删除此代码：

onclick="$(this).closest(\'form\').submit()"

【讨论】：

谢谢，这似乎有效。该页面不再重新加载，我收到警报。但是警报消息存在问题。它向我展示了我的 HTML 页面的整个源代码，而不是 PHP 应该返回的内容（“成功了！”）。
我做了，还是一样。
哦。回显后不要忘记exit;，因为它将继续呈现页面中剩余的 html 源代码。
好的，现在看起来好多了。我看到“那行得通！”在警报消息的末尾，但上面仍然有一些 HTML 源代码（我使用的是 Wordpress，也许这就是原因？）。我可以使用例如$data = 'That worked!' 然后只提醒这个变量的值？
我相信是的。如果您确实必须将 php 代码与 html 混合，则应将该特定代码放在标记之前。

【解决方案2】：

您必须从您的onclick 甚至return false;，否则浏览器将继续提交表单。

onclick="$(this).closest('form').submit(); return false;"

【讨论】：

谢谢，我现在已经完全删除了 onclick() 部分。该页面不再重新加载，但没有任何反应，我也没有收到警报。
正确的想法，但错误的地方。那只是说submit the form, wait don't submit the form。这应该在 OP 执行 ajax 请求的 javascript 代码块中完成。

【解决方案3】：

试试这个：

<form method="post">
            <i id="<?php echo $get_uncontacted_member->id; ?>" class="fa fa-phone-square called"></i>
    </form>
    <script>
            $('.called').click(function()
            {
                    $.ajax({
                            type   : 'post',
                            url    : 'customer-management',
                            data   : {form_sent: 'yes',id:$(this).attr('id')},
                            success: function(r)
                            {
                                    alert(r);
                            }
                    })
            });
    </script>

PHP：

    <?php
if(isset($_POST['form_sent']) && $_POST['form_sent'] === 'yes')
{
        echo 'That worked!';
        exit;
}
?>

【讨论】：