php - PHP AJAX HTML:在 foreach 循环中更改唯一表数据
问题描述
我是 PHP 和 Ajax 的新手。我正在尝试创建一个对象数据表,我可以在其中根据<select><option>...
表单选择显示的数据。
我有一个 PHTML 模板,如下所示:
<?php
$content = "";
// creates data selector
$content .= "
<form id = select_data>
<select id = data_selection>
<option value = data1>Data 1</option>
<option value = data2>Data 2</option>
<option value = data3>Data 3</option>
<option value = data4>Data 4</option>
</select>
<input id = selected_data type=submit />
</form>";
// creates table header
$content .= "
<tr>
<th>Data</th>
</tr>";
$array_ids = array(1, 2, 3); // etc, array of object id's
foreach ($array_ids as $array_id) {
$object = // instantiate object by array_id, pseudocode
$object_data = $object->getData('default-data'); // get default data to display
// create table item for each object
$content .= "
<tr>
<td><p>$object_data</p></td>
</tr>";
}
print $content;
?>
这会打印出表格内容,通过 id 加载对象,然后获取并显示<p>
标签内的默认数据。然后我有一些 Javascript,如下所示:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#select_data').on('submit', function(e){ // get selected data type
e.preventDefault();
var data_selected = $("#data_selection :selected").val(); // create var to pass to ajax
$.ajax({
type: "POST",
url: 'post.php',
data: {data_selected: data_selected},
success: function(data){
$("p").html(data); // replace all <p> tag content with data
}
});
});
});
</script>
此 Javascript 获取选定的数据类型,从中创建一个变量以传递给 ajax,然后调用 ajax,post.php
如下所示:
<?php
$attribute = false;
if (isset($_POST['data_selected'])){
$data = $_POST['data_selected']; // assigns variable out of ajax data
$object = //instantiate object, again pseudocode
$object_data = $object->getData($data); // get new data to replace into the ```<p>``` tag
echo $object_data;
}
?>
问题是我拥有的 Javascript 将每个<p>
标签更改为 foreach 循环迭代的最后一个数据,因为每个<p>
标签都不是唯一标识的,并且 Ajax 不会根据唯一标识符更新数据,例如可能的$array_id
. 这让我想到了我尝试的解决方案。
我尝试<p>
使用以下内容识别每个标签:
<td><p id = $array_id>$object_data</p></td>
然后从数组 ID 中创建一个新的 Javascript 变量:
var p_tag_id = <?php echo $array_id; ?>;
最后使 Ajax 成功函数的目标元素 ID 基于var p_tag_id
:
$("#" + p_tag_id).html(data);
虽然这不会<p>
像以前那样更改所有标签,但它只会更改最终<p>
标签并保持其之前的所有实例不变,因为 Javascript 没有迭代每个<p>
标签,或者因为 foreach 循环没有将 Javascript 作为每个 Javascript 的函数调用$array_id
。
如何重写此代码,以便 Ajax 唯一地更新每个表项的数据,而不是使用相同的数据更新它们?有没有更好的方法来解决这个问题?
解决方案
您需要一种方法来识别包含<p>
要更新的标记的表行,也许value
SELECT 元素的属性会有所帮助。
您可以通过使用 slice 剥离最后一个字符(即数字)从变量中获取单击选项的编号:data_selected
var num = data_selected.slice(-1) - 1;
(减去 1,因为表行是零索引的)
然后,在 AJAX 代码块的成功函数中:
$('table tr').each(function(i,v){
if (i == num){
$(v).find('td').find('p').html(data);
}
});
上面抓取所有表格行(作为一个集合)并一个接一个地循环它们。在函数中,i
是行的索引号,v
是行本身。索引号从零开始,这就是您之前从(例如)data3
[3] 值中减去 1 的原因,留下num == 2
. 当您找到正确的行号时,使用.find()
查找该<td>
行中的 ,然后查找该行<p>
中的<td>
和 Bob 的叔叔。
我没有测试上面的代码,所以这个例子中可能存在错误,但是这种方法应该可以工作。
推荐阅读
- hashicorp-vault - vault write 和 vault kv put 有什么区别?
- android - 导航抽屉中的默认后退按钮不起作用
- codeigniter - $cofig [modules_locations] 未加载数据表
- postgresql - Docker 容器中 Alpine Linux (arm32v6) 上的 PostgreSQL 9.6.9 - 如何安装正确的 postgresql-contrib 包?
- java - bean:define 的 JSTL 标记替换
- objective-c - Objective-C 代码中的解析错误
- laravel - Laravel cicle foreach 一个垃圾对象
- sql - 特定行之间的差异
- jackson - 杰克逊以 FAIL_ON_UNKNOWN_PROPERTIES 失败
- mapbox - Kepler.gl 地图中心默认设置为 0,0