如何使用ajax jquery在不刷新的情况下显示插入的查询数据

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="result"></div>

$(document).ready(function() {
  $.ajax({
    url: 'query.php',  // 后端处理查询的接口地址
    type: 'GET',  // 请求类型，可以是GET或POST
    dataType: 'json',  // 服务器返回的数据类型，这里假设返回的是JSON格式数据
    success: function(data) {
      // 请求成功后的回调函数
      if (data.length > 0) {
        // 如果返回的数据不为空，则遍历数据并将其插入到页面中
        var resultHtml = '';
        for (var i = 0; i < data.length; i++) {
          resultHtml += '<p>' + data[i].name + '</p>';  // 假设查询结果中有一个name字段
        }
        $('#result').html(resultHtml);  // 将查询结果插入到页面中的容器中
      } else {
        $('#result').html('No data found.');  // 如果返回的数据为空，则显示提示信息
      }
    },
    error: function() {
      // 请求失败后的回调函数
      $('#result').html('Error occurred.');  // 显示错误信息
    }
  });
});

<?php
// 连接数据库等相关操作
// 执行查询操作，获取查询结果数据
$data = array(
  array('name' => 'John'),
  array('name' => 'Jane'),
  // 其他查询结果数据
);
echo json_encode($data);  // 将查询结果以JSON格式返回
?>