javascript - php变量和ajax javascript的问题

Question

好的，我已将此编辑为我在类似问题上提出的另外几个问题，但我真的很着急，所以我想开始一个新问题，如果打扰到任何人，我深表歉意。

首先我在 apache 服务器上的 test.php 上有一个 php 脚本

<?php
//create connection
$con = mysqli_connect("localhost", "user", "password", "dbname");

//check connection
if (mysqli_connect_errno()){
   echo "failed to connect to MySQL: " . mysqli_connect_error();
   }
$grab = mysqli_query($con, "SELECT * FROM table");
$row = mysqli_fetch_array($grab);
$name = $row["name"];
$color = $row["color"];
$price = $row["price"];
$n1 = $name[0];
$c1 = $color[0];
$p1 = $price[0];

?>

然后我将此 ajax 脚本设置为触发以 html 编写的网页的页面加载。所以 load() 函数是 body 标签中页面的加载。这个脚本在头部。

function load(){
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET", "test.php", true);
   xmlhttp.send();
   xmlhttp.onreadystatecahnge = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
         document.getElementById("itemNameLink1").innerHTML = "<?php echo $n1;?>;
         }
      }
   }

好的，所以我想要的是要在 javascript ajax 代码中使用的 php 脚本中的 $n1 变量。脚本在哪里，但我不确定在哪里或如何使用变量，我已经尝试了一些东西。现在发生的只是 itemNameLink1 的 innerHTML 消失了。

我很新，所以任何建议将不胜感激，谢谢。

Answer 1

从请求返回的响应(这是你在 php 中回显的)你可以通过 XMLHttpRequest 对象的 responseText 属性获得。所以首先你的 JS 代码应该是:

function load(){
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET", "test.php", true);
   xmlhttp.send();
   xmlhttp.onreadystatecahnge = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
         document.getElementById("itemNameLink1").innerHTML = xmlhttp.responseText;
         }
      }
   }

现在在 php 中 echo $n1 变量:

....
$grab = mysqli_query($con, "SELECT * FROM table");
$row = mysqli_fetch_array($grab);
$name = $row["name"];
$color = $row["color"];
$price = $row["price"];
$n1 = $name[0];
$c1 = $color[0];
$p1 = $price[0];

// echo it to be returned to the request
echo $n1;

更新为对多个变量使用 JSON

所以如果我们这样做:

$name = $row["name"];
$color = $row["color"];
$price = $row["price"];

$response = array
(
    'name'  => $name,
    'color' => $color,
    'price' => $price
);

echo json_encode($response);

然后在 javascript 中我们可以再次解析它以获得包含 3 个变量的数据对象。

var data = JSON.parse(xmlhttp.responseText);
//for debugging you can log it to console to see the result
console.log(data);
document.getElementById("itemNameLink1").innerHTML = data.name; // or xmlhttp.responseText to see the response as text

获取所有行:

$row = mysqli_fetch_array($grab); // this will fetch the data only once

你需要循环遍历从数据库中获取的结果集:使用 assoc 而不是 array 也会提高性能

$names = $color = $price =  array();

while($row = mysqli_fetch_assoc($grab))
{
    $names[] = $row['name'];
    $color[] = $row['color'];
    $price[] = $row['price'];
}

$response = array
(
    'names' => $names,
    'color' => $color,
    'price' => $price
);