如何使用ajax將html表值添加到數據庫中

Question

我有一個表格，其行是動態添加的。當點擊提交按鈕時，即時嘗試發送每行數據時會出現問題。我有以下功能至今：

我的HTML表：

<form id="ObsForm" method="POST" action="saveObstacles.php"> 
<table style="width:100%;"> 
<thead> 
<tr> 
<th></th><th></th><th>Obstacle</th><th>Likelihood</th><th>Severity</th><th>Principal</th><th>RiskOfObstacle</th><th>ValueOfObstacle</th> 
</tr> 
</thead> 
<tbody id="MyTable"> 
</tbody> 
</table> 
</form> 
<div class="controls"> 
<button class="save">Save</button><button class="addRow">Add Obstacle</button> 
<input type="submit" name="submit" id="submit" value="submit"> <!-- value="submit" id="submit"> --> 
<div id="saveWrapper"> 
<label>Saved Obstacles:</label></br> 
<div id="savedDiv"></div> 
</div> 
</div> 
</article> 
</div> 

爲表中的腳本：

<script class="rowItem" type="text/x-jsrender"> 
<tr> 
<td><button class="remove">remove</button></td> 
<td><input name="chkbox[]" type="checkbox" /></td> 
<td><textarea class="Obstacle" name="Obstacle[]" data-link="Obstacle" cols="20"></textarea></td> 
<td> 
<select class="Likelihood" name="Likelihood[]" data-link="Likelihood"> 
<option value="0.12">Low</option><option value="0.39">Medium</option><option value="0.49">High</option> 
</select> 
</td> 
<td> 
<select class="Severity" name="Severity[]" data-link="Severity"> 

<option value="0.12">Low</option><option value="0.39">Medium</option><option value="0.49">High</option> 
</select> 
</td> 
<td><input class="Principal" name="Principal[]" data-link="Principal" required="" placeholder="102.5" type="text" /></td> 
<td><input class="ObsRisk" name="ObsRisk[]" data-link="ObsRisk" readonly="" type="text" /></td> 
<td><input class="ObsValue" name="ObsValue[]" data-link="ObsValue" readonly="" type="text" /></td> 
</tr> 
</script> 

，顯然我有一個行之有效的addrow（）函數。我已經編輯我以前的功能如下：

$("#submit").click(function(e) { 
e.preventDefault(); 
var obsName = $("#Obstacle").val(); 
var likeli = $("#Likelihood").val(); 
var sever = $("#Severity").val(); 
var princ = $("#Principal").val(); 
var risk = $("#ObsRisk").val(); 
var value = $("#ObsValue").val(); 
var dataString = 'obsName='+Obstacle+'likeli='+Likelihood+'sever='+Severity+'princ='+Principal+'risk='+ObsRisk+'value='+ObsValue; 
$.ajax({ 
type:'POST', 
data:dataString, 
url:'saveObstacles.php', 
success:function(data) { 
alert(data); 
} 
}); 
}); 

終於我的PHP代碼如下所示：

<?php 
$user = $_SESSION['user']['UserName']; 
$sql = "INSERT INTO obstacles (ObstacleID, Principal, ObstacleDescription, Uncertainty, Severity, UserName, ComplianceID)VALUES (:ID, :principal, :obstacleDec, :likelihoodScale, :severityScale, :aUser, :compID)"; 
$stmt = $db->prepare($sql); 

for ($i=0; $i<count($_POST['Obstacle']); $i++) { 
$values = array(':ID'=>'',':principal'=>$_POST['Principal'][$i], ':obstacleDec'=>$_POST['Obstacle'][$i],':likelihoodScale'=>$_POST['Likelihood'][$i], ':severityScale'=>$_POST['Severity'][$i], ':aUser'=>$user, ':compID'=>''); 
//var_dump($values); 
try{ 
$result= $stmt->execute($values);}catch(PDOException $ex){ 
die("Failed to run query: " . $ex->getMessage());} 
} 

header("Location: obstacles.php"); 
die("Redirecting to obstacles.php"); 

>

我想每一行中的所有數據將被保存當提交按鈕被點擊但目前沒有工作的時候到數據庫。我仍然在努力理解ajax是如何工作的，所以如果你能夠提供幫助的話。謝謝。

Answer 1

我想出瞭解決我的問題。我將jquery/ajax函數更改爲以下內容：

$('.save').click(function (e) { 
var obdata = JSON.stringify(obstacles);  
var ops = $('.options :selected').val(); 
    $.ajax({ 
     type: 'post', 
     url: 'saveObstacles.php', 
     data: {"obstacles": obdata, "options": ops}, // json data to server 
     success: function(d) { 
      console.log(d); // do something on success 
      alert("Data Saved! Now you can get .."); 
      //$('#savedDiv').html(d); 
      $('#savedDiv').html(JSON.stringify(obstacles)); 
     } 
}); 

}）;

，然後我可以得到我的PHP文件這樣的數據：

<?php 
require("common.php"); 
error_reporting(0); 
$json_arr = json_decode($_POST['obstacles'], true); 
var_dump($json_arr); 
echo "First name in json is:". $json_arr[0]['Obstacle']; 
?>