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标签中页面的onload。这个脚本在头脑中。

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;?>;
         }
      }
   }

好吧所以我想要的是php脚本中的$ n1变量，用于javascript ajax代码。脚本在哪里，但我不知道在哪里或如何使用变量，我尝试过一些东西。现在发生的所有事情都是itemNameLink1的innerHTML消失了。

我很新，所以任何建议都会受到赞赏，谢谢。

Answer 1

您应该定义PHP变量。并在您的javascript中使用该变量：

<?php
    $n1 = "asd";
?>
<html>
<head></head>
<body>

    <div id="itemNameLink1"></div>

    <script>
        function load()
        {
            var xmlhttp = new XMLHttpRequest();                     
            xmlhttp.open('GET', '/test.php', true);
            xmlhttp.send(null);
            //Note you used `onreadystatecahnge` instead of `onreadystatechange` 
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("itemNameLink1").innerHTML = '<?=$n1?>';
                }
            }
        }

        load();
    </script>
</body>
</html>

Answer 2

您可以通过responseText对象的XMLHttpRequest属性获得的请求返回的响应（这是您在php中回显的内容）。所以首先你的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而不是数组

$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
);

Answer 3

您可以使用包含声明为javascript变量的服务器端变量的php动态生成javascript文档，然后将其链接到文档的头部，然后在需要服务器端变量时将其包含在文档头中。这还允许您在页面生成时动态更新变量值，因此，例如，如果您有一个随机数或需要在每个页面加载时更改的内容，则可以在每次页面加载时传递正确的值。要做到这一点，你需要做一些事情。首先，创建一个php脚本并声明正确的标题，以便将其解释为脚本：

jsVars.php：

<?php
//declare javascript doc type
header("Content-type: text/javascript; charset=utf-8");
//tell the request not to cache this file so updated variables will not be incorrect if they change
header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Pragma: no-cache'); // HTTP 1.0.
header('Expires: 0'); // Proxies.

//create the javascript object
?>

var account = {
    email: <?= $n1; ?>,
    //if you need other account information, you can also add those into the object here
    username: <?= /*some username variable here for example */ ?>
}

您可以对在页面加载时传递给javascript所需的任何其他信息重复此操作，然后使用命名空间的javascript对象引用您的数据（使用对象命名空间将防止与其他可能未预料到的脚本变量发生冲突。）无论何时需要，如下：

<script type="text/javascript>
//put this wherever you need to reference the email in your javascript, or reference it directly with account.email
var email = account.email;
</script>

您还可以将条件语句放入文档的头部，这样它只会加载到需要它的页面上（或者如果任何权限检查或其他条件也通过）。如果您在其他脚本文件之前加载它，它将在所有脚本文件中可用，前提是您在比您的请求更高的范围内使用它。

<head>

<?php
    //set the $require_user_info to true before page render when you require this info in your javascript so it only loads on pages where it is needed.
    if($require_user_info == TRUE): ?>

    <script type="text/javascript" href="http://example.com/path-to-your-script/jsVars.php" />

    <?php endif; ?>

<script type="text/javascript" href="your-other-script-files-that-normally-load" />

</head>

您还可以对必须从服务器按特定条件加载的任何其他脚本执行此操作。

麻烦php变量和ajax javascript

3 个答案: