如何使用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']; 
?>