如何使用ajax将html表值添加到数据库答案

【问题标题】：How to add html table values to database using ajax如何使用ajax将html表值添加到数据库
【发布时间】：2013-11-24 22:58:51
【问题描述】：

我有一个动态添加行的表。当我在单击提交按钮时尝试在每一行中发送数据时，就会出现问题。到目前为止，我有以下功能：

我的 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 是如何工作的，所以如果你能帮忙的话。谢谢。

【问题讨论】：

为什么要触发事件？您还没有注册任何事件处理程序。
你的 save.php 脚本是什么样的？我还需要查看函数的边界。您应该尝试查看 console.log("Hello");在函数中工作，以确保您首先到达您的函数。基本上你需要从按钮向上调试。如果你看到一个 js 错误，你可能会看到 $ 没有定义。抱歉，我无法完全帮助您，您需要提供更多信息。
这个函数在哪里被调用？您采取了哪些故障排除步骤？在提问时确实需要更加努力地提供更多细节
请检查所做的修改，看看您是否需要更多详细信息！谢谢
你真的应该缩进你的代码。

标签： php jquery html jsrender

【解决方案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'];
?>

【讨论】：