У меня есть простой код ajax–jquery / html / php, но я получаю проблему, когда я нажимаю кнопку, чтобы добавить данные, а затем просто обновляю страницу, и ничего не происходит, также я не могу понять, в чем проблема, потому что тогда мой success, error в ajax dont work becouse страница обновилась …
Здесь у меня есть код 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, тогда страница просто обновляется и ничего не добавляет в базу данных. В чем причина?
Вам необходимо предотвратить действие по умолчанию. Пытаться:
$("#addCom").click(function(evt) { evt.preventDefault(); ....
официальные документы
попробуйте это, добавьте 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); } }); }); });
Вам нужно предотвратитьDefault, чтобы остановить отправку формы.
$( document ).ready(function() { $("#addCom").click(function(e) { e.preventDefault(); //functions }); });