如何使用Javascript停止页面刷新[关闭]答案

【问题标题】：How to stop page refresh using Javascript [closed]如何使用Javascript停止页面刷新[关闭]
【发布时间】：2020-01-02 14:15:16
【问题描述】：

我尝试了多种方法来停止页面，但不幸的是，它不起作用，我有一种前端形式的 Wordpress 插件我尝试了可能的时间，但代码不起作用插件表单代码

echo '<div id="submit_car_form">';
echo '<form id="cd_car" name="cd_car" class="cd_car" method="post" action="'.$_SERVER['PHP_SELF'].'" enctype="multipart/form-data" >';

        echo '<input type="hidden" name="author_id" value="'. get_current_user_id().' " />';

        echo '<p><label for="title">Title</label><br />';
        echo '<input type="text" id="title" value="" size="60" name="title" />';
        echo '</p>';

       ..........................
       i Have multiple inputs
       ..........................

        echo '<p align="left"><input type="submit" tabindex="6" id="submit_car" name="submit_car" /></p>';
        wp_nonce_field( "car-frontend-post" );
        echo '</form>';
        echo '</div>';

表单提交时停止刷新的Javascript代码

jQuery(document).ready(function($) {
    $('#submit_car').on('submit', function(event){
    // $('#cd_car').on('submit', function(e){
    // $('#cd_car').submit(function(e){
    // $('#submit_car').click(function(e){
        e.preventDefault();
        var message = document.getElementById("file").value;
        var title = document.forms["cd_car"]["title"].value;
        if (title == ""){
            alert("Title cannot be empty");
            return false;
        }
        else {
        $.ajax({
            type: 'POST', 
            dataType: 'JSON',
            data: new FormData($('#car_data')[0]),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data){
                console.log(data);
                alert('Your Form Submited');
            },
            error: function(data){
                console.log(data);
                alert('something wrong');
            }
        });
        return false;
      }
  });
});

【问题讨论】：

这里有两个问题。首先，您使用e.preventDefault，但您将参数命名为event。更改为event.preventDefault，您的代码将按照您的需要运行。其次，如果您正在收听submit 事件，您应该选择#cd_car 表单，而不是按钮。最后，您可以删除return 语句，因为它们在使用preventDefault() 时没有实际意义。投票结束是一个印刷错误
我更正了上面提到的更改，但它显示错误警报消息alert('something wrong');
这意味着您的 AJAX 请求由于服务器上的错误而失败。另请注意，您似乎在 AJAX 请求中缺少 url 属性
是的，我刚刚添加了 url ` url : '';`

标签： javascript php jquery html wordpress

【解决方案1】：

您的表单的 id 是 cd_car，而不是 submit_car！因此，在您更改选择器之前，您的 JS 处理程序不会以它为目标。

此外，如 cmets 中所述，您的处理程序中的事件对象称为 event，但在您的代码中，您使用的是 e.preventDefault() 而不是 event.preventDefault()

【讨论】：

应该是“使用event.preventDefault()而不是e.preventDefault()”
@GrumpysaysReinstateMonica 我是说 OP 使用的是e 而不是event，而不是相反。
抱歉，出于某种原因，我将其解读为“您应该使用”。
是的，我更改了事件参数并传递了函数的 id '#car_data' 所以不显示警报错误消息 alert('something wrong');