Javascript 如何在纯JS和PHP中实现同样的功能，类似于jQuery和Laravel？

当我开始学习网络时，在学习了一点语言之后，我直接去了图书馆和框架。现在我想学习一些原生的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”），但是如果我想从PHP发送几个html标记中的数据呢？有类似的答案，但有点复杂，不是有一个简单的文档化方法吗？

在一个非常中间的层次上，你可以做一些事情来实现类似的“香草”JS和“无框架”PHP

在将数据发送回客户端之前，您需要对数据进行JSON编码

product.php

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

$jsonResponse = json_encode($product);

echo $jsonResponse;
?>

HTML

从服务器上的PHP文件中获取JSON格式的数据。


var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
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；
}
};
open（“GET”，“product.php”，true）；
xmlhttp.send（）；

但是，例如，如果我有两个标记

和

，我想在其中插入两个不同的数据？例如，在

id=“demo”

中，我想插入

id

，在

id=“demo_2”

中，我想插入

name

？我将用更详细的示例进行更新，但实际上您只需重复这行文档即可。getElementById（“demo”）.innerHTML=product.name；随着id和赋值的更改，“Fails”的含义相当广泛。请分享你的尝试，以及你调试为什么你的代码不工作的方法。我描述了我所做的，显示我的代码有意义吗？如果你坚持，我可以补充，但是@Luke正确理解了我的问题并给出了全面的答案

<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>