我如何在纯 JS 和 PHP 中做同样的事情，类似于 jQuery 和 Laravel？

Question

当我开始学习 Web 时，在学习了一点语言之后，我直接进入了库和框架。现在想学习一些原生的JS和PHP。

问题如下：在 jQuery 和 Laravel 上，通过 ajax 请求，我可以同时将数据插入到不同的 html 标签中，如下所示：

success: function(response) {
    $('.basket-prod-name').html(response.name);
    $('.modal_order').attr('data-id', response.modalProdId);
    $('.basketimg').attr('src', response.img);
    $('input[name=inputModal]').val(1);
}

然后，在控制器中，插入数据如下：

return response()->json([ 
    'modalProdId'=> $product->id,
    'name'=> $product->name,
    'img'=> "/img/products/".$product->cardImage->path,
]);

但是尝试在纯 JS 和 PHP 中做同样的事情失败了。例如 XMLHttpRequest，我可以使用 responseText，然后从 PHP 发送响应（echo "something"），但是如果我想在几个 html 标签中从 PHP 发送数据怎么办？ SO上有类似的答案，但是有点复杂，没有简单的文档方法吗？

Answer 1

在非常中等的水平上，您可以做一些事情来在“vanilla”JS 和“framework free”PHP 中实现类似的目标。

您希望在将数据发送回客户端之前对数据进行 JSON 编码。

product.php

<?php
$product->id = "PDX-123";
$product->name = "Product 123";

$jsonResponse = json_encode($product);

echo $jsonResponse;
?>

HTML

<h2>Get data as JSON from a PHP file on the server.</h2>

<p id="demo"></p>
<p id="demo_2"></p>

<script>
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    product = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = product.id;
    document.getElementById("demo_2").innerHTML = product.name;
  }
};
xmlhttp.open("GET", "product.php", true);
xmlhttp.send();
</script>