我是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,然后调用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; ?>;
最后根据var p_tag_id
使Ajax成功函数的目标元素ID为:
$("#" + p_tag_id).html(data);
虽然这不会像以前那样更改所有<p>
标记,但是它只更改最终的<p>
标记并保留所有实例不变,这是因为Javascript并未遍历每个<p>
标记,或者因为foreach循环不会将Javascript作为每个$array_id
的函数来调用。
如何重写此代码,以便Ajax唯一地更新每个表项的数据,而不是使用相同的数据来全部更新它们?有没有更好的方法来解决此问题?
[您需要一种方法来识别包含要更新的<p>
标记的表行,也许SELECT元素的value
属性可能会有所帮助。