在不重新加载页面的情况下提交表单到同一页面

Question

在不重新加载页面的情况下提交表单到同一页面

4

我正在尝试使用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!' }

页面重新加载了，我猜我做错了什么。

- Reza Saadati

1

请移除此 onclick="$(this).closest(\'form\').submit()"。它会重新加载页面。 - Farzher

@StephenBugsKamenar 确实，谢谢！但我仍然没有收到警报。 - Reza Saadati

1

你的HTML中有onclick="$(this).closest(\'form\').submit()"，而JavaScript中有$('.called').click(function() { });，为什么两者都要用？此外，在这两个代码中都没有阻止默认表单提交。尝试在$('.called').click(function() { });代码中添加event.preventDefault();。 - Sean

我相信你只是想使用AJAX，这里有一个例子：https://dev59.com/oWQo5IYBdhLWcg3wGsLN#16324058 - abc123

3个回答

1

在你的onclick事件中必须return false;，否则浏览器会继续提交表单。

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

- Chloe

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Reza Saadati

1

正确的想法，但是放错了位置。这只是说“提交表单，等待不要提交表单”。应该在JavaScript代码块中完成，在那里OP正在进行他们的AJAX请求。 - Sean

1

试试这个：

<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;
}
?>

- Rayon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jake Opena · Accepted Answer

您没有正确传递数据。由于您正在进行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()"