如何使用ajax将html表值添加到数据库 [英] How to add html table values to database using ajax

问题描述

我有一个动态添加行的表。当我尝试在单击提交按钮时在每行中发送数据时出现问题。我希望在单击提交按钮时，每行中的所有数据都会保存到数据库中，但此时此操作无效。我仍在努力了解ajax是如何工作的，所以如果你能帮助我。谢谢。

到目前为止我有以下功能：



我的HTML表格：

 <  表格    id   =  ObsForm   方法  =  POST    action   =  saveObstacles.php >  
 <  表    style   =  width：100％; > ;  
 <   thead   >  
 <   tr  >  
 <   th  >  <   / th   >  <   th  >  <   / th  >  <   th  > 障碍< span class =code-keyword><   / th  >  <   th  > 可能性<   / th  >  <   th  > 严重性< ;   / th  >  <   th  > 校长<   / th  >  <  < span class =code-leadattribute> th  >  RiskOfObstacle <   / th  >   <   th  >  ValueOfObstacle <   / th  >  
  <   / tr  >  
 <   / thead  >  
 <   tbody     id   =  MyTable >  
 <   / tbody  >  
 <   / table  >  
 <   / form  >  
 <   div     class   = 控制 >  
 <  按钮    class   =  save > 保存<   / button  >  <  按钮    class   =  addRow > 添加障碍<   / button  >  
 <  输入   类型  = 提交   名称  = 提交    id   = 提交    value   = 提交 >  <！ -     value =submitid =submit>    - >   
 <   div     id   =  saveWrapper >  
 <  标签 > 已保存的障碍：<   / label  >   <   / br  >  
 <   div     id   =  savedDiv >  < span class =code-keyword><   / div  >  
 <   / div  >  
 <   / div  >  
 <   / article  >  
 <   / div  > ;  

表格脚本：



< pre lang =xml> < script class = rowItem < span class =code-attribute> type = text / x-jsrender >
< tr >
< td > < 按钮 < span class =code-attribute> class = 删除 > 删除< / button > < / td >
< td > < 输入 名称 = chkbox [] type = 复选框 / > < / td >
< td > < textarea class = 障碍 名称 = 障碍[] 数据链接 = 障碍 cols = 20 > < / textarea > < / td >
< td >
< 选择 class = 可能性 名称 = 可能性[] data-link = 可能性 >
< 选项 value = 0.12 > 低< / option > < 选项 value = 0.39 > 中< / option > < 选项 value = 0.49 > 高< / option >
< / select >
< / td >
< td >
< 选择 class = 严重程度 名称 = 严重性[] data-link = 严重性 >

< 选项 值 = 0.12 > 低< / option > < 选项 value = 0.39 > 中< / option < span class =code-keyword>> < 选项 value = 0.49 > 高< / option >
< / select >
< / td >
< td > < < span class =code-leadattribute> input class = Principal name = Principal [] data-link = Principal 必需 = 占位符 = 102.5 类型 = text / > < / td >
< td > < < span class =code-leadattribute> input class = ObsRisk 名称 = ObsRisk [] data-link = ObsRisk readonly = type = text / > < / td >
< td > < 输入 class = ObsValue name = ObsValue [] data-链接 = ObsValue readonly = 类型 = text / > < / td &g t;
< / 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 =' +障碍+ '  likeli =' +可能性+ '   sever =' +严重性+ '  princ = ' + Principal + '  risk =' + ObsRisk + '  value =' + ObsValue; 
 $ .ajax（{
 type：'  POST'，
 data：dataString，
 url：'  saveObstacles.php'，
成功：function（data）{
 alert（data）; 
} 
}）; 
}）; 

最后我的php代码如下：

 <？php  
  $ user  = $ _SESSION ['  user'] ['  UserName']; 
  $ sql  =  插入障碍物（ 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 ['' 障碍']）; $ i ++）{
  $ values  = array（' ：ID' => ' '，' ：principal' => $ _POST ['  Principal'] [$ i]，'  ：obstacleDec' => $ _ POST [' 障碍'] [$ i]，' ：likelihoodScale' => $ _POST ['  Likelihood'] [$ i]，'  ：severityScale' => $ _ POST [' 严重性'] [$ i]，' < span class =code-string>：aUser' => $ user，' ：compID'  => ' '）; 
  //   var_dump（$ values）;  
 try {
 $ result = $ stmt->执行（$ values）;} catch（PDOException $ ex）{
 die（ 无法运行查询：。$ ex-> getMessage（））;} 
} 
 
 header（  位置：barriers.php）; 
 die（ 重定向到barriers.php）; 

解决方案

（ ＃submit ）.click（function（e）{
e.preventDefault（）;
var obsName =

（ ＃Obstacle）。val（）;
var likeli =

（ #Larkelihood ）。val（）;
var sever =

I have a table whose rows are dynamically added. The problem arises when im trying to send data in each row when the submit button is clicked. I would like all the data in each row to be saved to the database when the submit button is clicked but that is not working at the moment. I am still struggling to understand how ajax works so if you could kindly help out. thanks.
I have the following function so far:

My HTML table:

<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>

The script for table:

<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>

and obviously I have the addrow() function which works well. This function is called when the save button is clicked:

$("#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);
}
});
});

finally my php code looks like this:

<?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");

解决方案

("#submit").click(function(e) { e.preventDefault(); var obsName =

("#Obstacle").val(); var likeli =

("#Likelihood").val(); var sever =

这篇关于如何使用ajax将html表值添加到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！