Javascript 在div中插入ajax响应

第一次尝试AJAX。。。。。 我正在尝试根据用按钮所做的选择更新

我目前只是提醒ID回来，因为这是我能做的一切

是否可以将文件my_page.php放入类为“populated_info”的div中？ 然后，当我按下另一个按钮时，页面将再次运行，并用新结果填充div。我已经基于ID构建并运行了my_page.php，只是无法将其呈现在正确的位置

HTML:

姓，名

阿贾克斯：

功能1（ID）{
$.ajax（{
类型：“POST”，
url:“functions/my_page.php”，
数据：“ID=”+ID，
成功：功能（resp）{
警报（resp）；//如何让它将页面放回正确的位置？
},  
错误：函数（e）{
警报（'错误：'+e）；
}
});
}

您的方法：

关于您的按钮，我建议分离内联Javascript处理程序，以保持HTML和Javascript分离。我将使用自定义数据属性在此处存储ID：

<button type="button" class="btn btn-default custom mybutton" data-id="<?php echo $CURRENT_ID;?>">
    <?php echo $lastName . ', ' . $firstName; ?>
</button>

您的AJAX请求：

您可以缩短整个函数，并使用以下命令将数据输入div：

function function1(ID) {
    // Get the output of functions/my_page.php, passing ID as parameter, and
    // replace the contents of .populated_info with it
    $('.populated_info').load('functions/my_page.php', { ID: ID });
}

看起来这里不需要回调函数，但如果需要，可以将其放在数据参数之后。这里回调的一个有用应用可能是错误处理程序。如何实现

---

另一方面，如果您只是获取数据，您可能应该使用GET HTTP方法而不是POST。

如果您成功从服务器获取响应，只需将警报（resp）替换为

$（'.populated_info'）.html（resp）

<script>
    function function1(ID) {
    $.ajax({  
      type: "POST",  
      url: "functions/my_page.php",
      data: "ID="+ID,
      success: function(resp){
        $('.populated_info').html(resp);
      },  
      error: function(e){  
      alert('Error: ' + e);  
      }
     });
    }
    </script>


功能1（ID）{
$.ajax（{
类型：“POST”，
url:“functions/my_page.php”，
数据：“ID=”+ID，
成功：功能（resp）{
$（'.populated_info'）.html（resp）；
},  
错误：函数（e）{
警报（'错误：'+e）；
}
});
}

$('.mybutton').click(function() {
    var ID = $(this).data('id');
    function1(ID);
});

function function1(ID) {
    // Get the output of functions/my_page.php, passing ID as parameter, and
    // replace the contents of .populated_info with it
    $('.populated_info').load('functions/my_page.php', { ID: ID });
}

<script>
    function function1(ID) {
    $.ajax({  
      type: "POST",  
      url: "functions/my_page.php",
      data: "ID="+ID,
      success: function(resp){
        $('.populated_info').html(resp);
      },  
      error: function(e){  
      alert('Error: ' + e);  
      }
     });
    }
    </script>