我的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); 
     }, 
    }); 
}); 

試試這個！