Question

我有简单的ajax-jquery / html / php代码，但是当我点击按钮添加数据时我遇到了问题，然后页面只是刷新而没有发生任何事情，我也看不出是什么问题因此我的{{ 1}}进入ajax不工作因为页面被刷新...

这里我有jquery / ajax代码：

success, error

也是HTML：

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

});
 });

和PHP PDO - 插入文件：

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

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

Answer 1

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

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

official docs

Answer 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); 
            }
        });

});
 });

Answer 3

您需要preventDefault才能停止提交表单。

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

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

3 个答案: