![](/img/trans.png)
[英]How to pass php json array into a JavaScript function via onclick
[英]How to pass array to PHP via javascript?
我想知道如何通过javascript将数组值传递给HTML? 我知道我们可以出于设计目的将其很好地放在PHP脚本本身的表中,然后传递给javascript以附加到id="default"
。
但是我更喜欢将设计和逻辑分开。 因此,如何处理从php通过javascript传递的数组,然后将其附加到HTML?
的PHP
try {
$stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order");
$stmt->execute();
$result = $stmt->fetchAll();
$default = array();
foreach($result as $row)
{
$top_level_id=$row['top_level_id'];
$top_level_name=$row['top_level_name'];
array_push($default, array("id" => $row['top_level_id'],"item" => $row['top_level_name']));
}
$default;
}
catch(PDOException $e) {
'Error: ' . $e->getMessage();
}
javacript
$("#clickme").on("click",function()
{
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var ajaxElm = document.getElementById('default');
ajaxElm.innerHTML = this.responseText;
var item_array=ajaxElm.innerHTML;
//how to process array retrieved from php script here and then append to id="default"?
for(var i=0;i<item_array.length;i++)
{
var id=item_array[i].id;
var name=item_array[i].name;
}
}
}
}
xmlhttp.open("GET", "selectTopLevel.php");
xmlhttp.send();
});
的HTML
<div class="row">
<div class="small-12 medium-12 large-12 columns text-center">
<a href="#" data-reveal-id="myModal" id="clickme" data-reveal>Click Me!</a>
</div>
</div>
编辑脚本
$("#clickme").on("click",function()
{
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
/* var ajaxElm = document.getElementById('default');
ajaxElm.innerHTML = this.responseText;
var item_array=ajaxElm.innerHTML;
for(var i=0;i<item_array.length;i++)
{
var id=item_array[i].id;
var name=item_array[i].name;
}*/
var data = JSON.parse(this.responseText);
for (i = 0; i < data.length; i++)
{
var id=data[i].id;
var name=item_array[i].name;
$("#default").append("name= "+name);
}
}
}
}
xmlhttp.open("GET", "selectTopLevel.php");
xmlhttp.send();
});
只需将数据包装为JSON格式即可。 像这样:
的PHP
$output = array();
try {
$stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order");
$stmt->execute();
$result = $stmt->fetchAll();
foreach($result as $row)
{
$top_level_id=$row['top_level_id'];
$top_level_name=$row['top_level_name'];
array_push($output, array("id" => $row['top_level_id'],"item" => $row['top_level_name']));
}
}
catch(PDOException $e) {
//'Error: ' . $e->getMessage();
}
echo json_encode($output);
Java脚本
$("#clickme").on("click",function()
{
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var data = JSON.parse(this.responseText);
// do something with your data
}
}
}
xmlhttp.open("GET", "selectTopLevel.php");
xmlhttp.send();
});
然后,只需遍历数据数组并将其附加到其目的地即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.