我的jquery ajax代碼刷新頁面沒有道理

我有簡單的ajax-jquery/html/php代碼，但當我點擊按鈕添加數據，然後頁面只是刷新和沒有發生，我也看不到什麼是becouse那麼這個問題我success, error到AJAX不becouse被刷新頁面工作...我的jquery 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然後頁面只刷新並沒有添加到數據庫中。可能是什麼原因？

來源

2014-05-25 gmaestro

通常，這是造成的，因爲你的表單提交和表單提交導致頁面重新加載，但我不明白爲什麼會在你的HTML發生。 – jfriend00

我的猜測是，點擊按鈕也將提交表單，它將重新加載頁面。嘗試阻止提交事件。（'.click *（function（e）{e.preventDefault（）; ...}）'） – christian314159

您需要防止默認操作。嘗試：

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

official docs

來源

2014-05-25 01:07:35 Victory

我可以在HTMl中防止這種情況嗎？ – gmaestro

@gmaestro，嘗試使用'

試試這個，加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); 
      } 
     }); 

}); 
});

來源

2014-05-25 01:12:37 volkinc

html方式防止提交??? – gmaestro

試圖改變 to Dodaj belesku – volkinc

您需要preventDefault停止表單提交。

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

來源

2014-05-25 01:14:01 Thomas

我可以防止這種情況變成html嗎？ – gmaestro

我的jquery ajax代碼刷新頁面沒有道理

回答

相關問題