Mon code jquery ajax rafraîchir la page sans raison

Question

J'ai un simple code ajax-jquery/html/php, mais j'ai le problème quand je clique sur le bouton pour ajouter des données, puis la page juste rafraîchir et rien ne se passe, aussi je ne vois pas quel est le problème becouse alors mon success, error en ajax ne fonctionnent becouse page a été rafraîchi ...

ici je jquery/ajax code:

$(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); 
      } 
     }); 

}); 
}); 

aussi 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> 

et PHP PDO - Insérer un fichier:

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>"; 

Mais quand je clique sur le bouton avec ID = Addcom puis page, rafraîchir et rien ajouter à la base de données. Quelle peut être la raison?

Answer 1

Vous devez empêcher l'action par défaut. Essayez:

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

official docs

Answer 2

essayer, ajoutez 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); 
      } 
     }); 

}); 
}); 

Answer 3

Vous devez prévenirDéfaut pour empêcher l'envoi du formulaire.

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