我的ajax调用只能工作一次，但它不能再次工作，除非我刷新页面

Question

我正在尝试使用Ajax来执行表单。这是我的HTML部分，其中我试图进入

<form class="col s12"> 
     <div class="row"> 
      <div class="input-field col s6"> 
       <i class="material-icons prefix">mode_edit</i> 
       <textarea id="icon_prefix2" class="materialize-textarea" name ="discussion"></textarea> 
       <input type="hidden" name="user" value="<?php echo $_SESSION['userid'];?>"> 
       <input type="hidden" name="id" value="<?php echo(rand(1000,99999)); ?>"> 
       <input type="hidden" name="date" value="<?php echo date("d.m.Y"); ?>"> 
       <input type="hidden" name="time" value="<?php echo date("h:i:s"); ?>"> 
       <label for="icon_prefix2">Start your discsussion</label> 
       <input type="submit" class="btn waves-effect waves-light right" value="post"> 
      </div> 
     </div> 
    </form> 

和Ajax调用

$(function() { 

    $('form').on('submit', function (e) { 

     e.preventDefault(); 

     $.ajax({ 
      type: 'post', 
      url: 'cardiosubmit.php', 
      data: $('form').serialize(), 
      success: function() { 
       alert('successfully posted') 
      }, 
      error: function() { 
       alert('error') 
      } 

     }); 

    }); 

}); 

，这是PHP代码存储在数据库中的值：

<?php 

session_start(); 


include_once('include/config.php'); 

$conn = config(); 

$uname = $_POST['user']; 
$uid = $_POST['id']; 
$val = $_POST['discussion']; 
$date = $_POST['date'];`enter code here` 
$time = $_POST['time']; 

if (!$conn) { 
$msg = "connection failed"; 
die($msg); 
} else { 
$query = "INSERT into cardiocase (id,uid,val,date,time) VALUES 
(?,?,?,?,?);"; 
$stmt = $conn->prepare($query); 
$stmt->bind_param('sssss',$uid,$uname,$val,$date,$time); 

if($stmt->execute()){ 
    echo "success"; 
}else{ 
    echo "fail"; 
} 
$stmt->close(); 

} 

该值首次被存储。但在成功消息后，当我尝试再次进入它只是说成功发布，但是当我检查数据库的值不存在。如果我刷新页面，并尝试再次获取存储。

Answer 1

提高代码那样：

<form class="col s12"> 
    <div class="row"> 
     <div class="input-field col s6"> 
      <i class="material-icons prefix">mode_edit</i> 
      <textarea id="icon_prefix2" class="materialize-textarea" name ="discussion"></textarea> 
      <label for="icon_prefix2">Start your discsussion</label> 
      <input type="submit" class="btn waves-effect waves-light right" value="post"> 
     </div> 
    </div> 
</form> 

删除隐藏字段

在PHP文件

然后：

<?php 
session_start(); 


include_once('include/config.php'); 

$conn = config(); 

$uname = $_SESSION['userid']; 
$uid = echo(rand(1000,99999));; 
$val = $_POST['discussion']; 
$date = date("d.m.Y"); 
$time = date("h:i:s"); 

if (!$conn) { 
$msg = "connection failed"; 
die($msg); 
} else { 
$query = "INSERT into cardiocase (id,uid,val,date,time) VALUES 
(?,?,?,?,?);"; 
$stmt = $conn->prepare($query); 
$stmt->bind_param('sssss',$uid,$uname,$val,$date,$time); 

if($stmt->execute()){ 
    echo "success"; 
}else{ 
    echo "fail"; 
} 
$stmt->close(); 

} 

Answer 2

使用preventDefault（）方法，以避免表单提交。

$('body').on("click", '.btn', function (e) { 
     e.preventDefault(); // prevent default functionality 
     // run AJAX 

}); 

它看起来像有一个与JS的地方 用一个错误来看看什么是AJAX结果

$.ajax({ 
      type: 'post', 
      url: 'cardiosubmit.php', 
      data: $('form').serialize(), 
      success: function() { 
       alert('successfully posted') 
      }, 
      complete: function (data, textStatus) { 
       console.log(JSON.stringify(data)); 
       console.log(textStatus); 
      } 
     }); 

Answer 3

以下使用的代码 变化UR在HTML按钮<button class="btn waves-effect waves-light right trigger-submit" value="post">POST</button>

更新JS使用此代码$（“。trigger-submit”）。off（“click”）; （“。trigger-submit”）。on（“click”，function（）{.ajax（{type：'post'， url：'cardiosubmit.php'， data：$（'form '）.serialize（）， 成功：函数（）{ 警报（' 成功发布 '） }， 错误：函数（）{ 警报（' 错误'） }

}); 

}） ;'

Answer 4

问题是与这条线

<input type="hidden" name="id" value="<?php echo(rand(1000,99999)); ?>"> 

你让Ajax调用新行将被插入与表第一次说编号“123”，现在同时使下一个AJAX调用您的ID仍然是相同的，并且你正在尝试新的行添加到表重复的主键。

尝试在每次进行ajax调用之前生成新的id（可能是通过javascript）。

$(function() { 

    $('form').on('submit', function (e) { 

     e.preventDefault(); 

     //Generate random id for very ajax request. 
     $("[name='id']").val(Math.floor(Math.random() * 100)); 

     $.ajax({ 
      type: 'post', 
      url: 'cardiosubmit.php', 
      data: $('form').serialize(), 
      success: function() { 
       alert('successfully posted') 
      }, 
      error: function() { 
       alert('error') 
      } 

     }); 

    }); 

}); 

Answer 5

<form action="cardiosubmit.php" class="col s12" id="myfrm" method="post" name="myfrm" >  
<div class="row"> 
    <div class="input-field col s6"> 
     <i class="material-icons prefix">mode_edit</i> 
     <textarea id="icon_prefix2" class="materialize-textarea" name ="discussion"></textarea> 
     <label for="icon_prefix2">Start your discsussion</label> 
     <input type="submit" class="btn waves-effect waves-light right" value="post"> 
    </div> 
</div> 
</form> 
<script type="text/javascript"> 
var frm = $('#myfrm'); 

frm.submit(function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      console.log('Submission was successful.'); 
      console.log(data); 
     }, 
     error: function (data) { 
      console.log('An error occurred.'); 
      console.log(data); 
     }, 
    }); 
}); 

试试这个！