我的 jquery ajax 代码无故刷新页面

Posted 2023-03-14

【中文标题】我的 jquery ajax 代码无故刷新页面

【英文标题】：My jquery ajax code refresh the page without reason

【发布时间】：2014-07-14 02:28:10

【问题描述】：

我有简单的 ajax-jquery/html/php 代码，但是当我单击按钮添加数据时出现问题，然后页面只是刷新并没有发生任何事情，我也看不出问题出在哪里，因为我的 @987654321 @ into ajax 不起作用，因为页面已刷新...

这里有 jquery / ajax 代码：

 $( document ).ready(function() 
$("#addCom").click(function() 
    var tabela = 'parcele';
        $.ajax(
            url: "insertKom.php",
            type: "POST",
            async: true, 
            data:  ajdi:ajdi, tabela:tabela,zakoga:$("#zakoga").val(),beleska:$("#beleska").val(),podsetnik:$("#podsetnik").val(),
            dataType: "html",

            success: function(data) 
                console.log(data);  
            ,
            error:function(data) 
            console.log(data); 
            
        );

);
 );

还有 HTML：

 <div class="jumbotron">
        <form class="form-horizontal">
<fieldset>


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="zakoga">Odnosi se na:</label>  
  <div class="col-md-4">
  <input id="zakoga" name="zakoga" type="text" placeholder="" class="form-control input-md">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="beleska">Beleska - komentar</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="beleska" name="beleska"></textarea>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="podsetnik">Podsetnik za dan:</label>  
  <div class="col-md-4">
<div class="input-append date" id="podsetnik" data-date="2014-05-05" data-date-format="yyyy-mm-dd">
  <input class="span2 form-control" size="16" type="text" value="">
  <span class="add-on"><i class="icon-th"></i></span>
</div>    
  </div>
</div>


<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="addCom"></label>
  <div class="col-md-4">
    <button id="addCom" name="addCom" class="btn btn-primary">Dodaj belesku</button>
  </div>
</div>

</fieldset>
</form>

    </div>

和 PHP PDO - 插入文件：

 try         
                $STH = $db->prepare("INSERT INTO zalihe (tabela, id_utabeli, datum, podsetnik, naslov, komentar, user_id) VALUES (:2,:1,:6,:3,:4,:5,:7)");

                $STH->bindParam(':1', $_POST['ajdi']);
                $STH->bindParam(':2', $_POST['tabela']);
                $STH->bindParam(':3', $_POST['podsetnik']);
                $STH->bindParam(':4', $_POST['zakoga']);
                $STH->bindParam(':5', $_POST['beleska']);
                $STH->bindParam(':6', now());
                $STH->bindParam(':7', $user_id);

                $STH->execute();

             catch (PDOException $e) 
                echo $e->getMessage();
            
            echo "<p>Data submitted successfully</p>";

但是当我点击带有 ID=addCom 的按钮时，页面只是刷新并且没有添加到数据库中。可能是什么原因？

【问题讨论】：

这通常是因为您的表单正在提交并且表单提交导致页面重新加载，但我不明白为什么会在您的 HTML 中发生这种情况。

我的猜测是点击按钮也会提交表单，它只会重新加载页面。尝试阻止提交事件。 (.click*(function(e) e.preventDefault(); ... ))

【参考方案1】：

您需要 preventDefault 来阻止表单提交。

$( document ).ready(function() 
  $("#addCom").click(function(e) 
    e.preventDefault();
    //functions
 );
);

【讨论】：

我可以阻止这个进入html吗？

【参考方案2】：

试试这个，添加 event.preventDefault();

$( document ).ready(function() 
$("#addCom").click(function(event) 
event.preventDefault();
    var tabela = 'parcele';
        $.ajax(
            url: "insertKom.php",
            type: "POST",
            async: true, 
            data:  ajdi:ajdi, tabela:tabela,zakoga:$("#zakoga").val(),beleska:$("#beleska").val(),podsetnik:$("#podsetnik").val(),
            dataType: "html",

            success: function(data) 
                console.log(data);  
            ,
            error:function(data) 
            console.log(data); 
            
        );

);
 );

【讨论】：

尝试将 Dodaj belesku 更改为 Dodaj belesku

【参考方案3】：

您需要阻止默认操作。试试：

 $("#addCom").click(function(evt) 
     evt.preventDefault();
     ....

official docs

【讨论】：

@gmaestro，尝试使用<button type="button" id="addCom" name="addCom" class="btn btn-primary">