Javascript 如何将html信息重新加载到js文件？

你好，我是js和html新手。 我正在制作一个网页，其中一部分会根据下拉列表中选择的选项动态更改。我正在使用下面的js脚本来完成它

function info(p){
  $.ajax({
    type: 'POST',
    dataType: 'json',
    data: {'idProductos': p},
    url: 'conexion.php',
    success:function(data){
      if(data.status == 'ok'){
  //      datos = $.parseJSON(data);
        $('#nombreSelec').text(data.result.nombre);
        $('#precioSelec').text(data.result.precio);
        $('#caracSelec').text(data.result.descripcion);
        var imagenURL = data.result.direccionImagen;
        var imagen = `
        <div class="container">
          <img id="imagenSelec" src="${imagenURL}" alt="">
          <button class="btn addToCart">Adquirir</button>
        </div>
        `
        $('#zonaImagen').html(imagen);


        }else{
            alert("User not found...");
        }
    },
    error: function(r){

    }
  });

}

---

您可以将代码封装在函数中的第二个JavaScript中：

function doSomething() {
    const addToShoppingCartButtons = document.querySelectorAll('.addToCart');
    console.log('addToShoppingCartButtons', addToShoppingCartButtons);
}

并添加一个处理程序，在解析延迟对象时调用该处理程序，该对象调用第二个脚本中的函数

$.ajax({
    // your code
}).then(function () {
    doSomething();
});

---

由于这两个脚本位于不同的文件上，并且是同时加载的，因此我认为完成这项工作的最佳方法是在AJAX完成时触发一个自定义事件，这样您的第二个脚本就可以知道何时运行。以下是一个工作示例：

$（“#zonaImagen”）。关于（“动态#u更新”，函数（）{
const addToShoppingCartButtons=document.queryselectoral（'.addToCart'）；
log（'addToShoppingCartButtons'，addToShoppingCartButtons'）；
})
$.ajax({
url:“https://reqres.in/api/users",
类型：“POST”，
数据：{
姓名：“保罗·陆克文”，
电影：[“我爱你，男人”，“榜样”]
},
成功：功能（响应）{
var imagenURL=“imageURL”；
var imagen=`Adquirir`；
$（'#zonaImagen'）.html（imagen）；
$（“#zonaImagen”）.trigger（“动态#u更新”）；
}
});

“添加到购物车”按钮将转到此处

function doSomething() {
    const addToShoppingCartButtons = document.querySelectorAll('.addToCart');
    console.log('addToShoppingCartButtons', addToShoppingCartButtons);
}

$.ajax({
    // your code
}).then(function () {
    doSomething();
});