ajax新增不刷新-示例代码

Ajax是一种在网页中实现异步通信的技术，它可以在不刷新整个页面的情况下与服务器进行数据交互。在实际开发中，我们经常会遇到需要在网页中新增内容但又不希望刷新整个页面的情况，这时可以使用Ajax来实现。

我们需要在网页中引入jQuery库，因为jQuery提供了非常方便的Ajax方法。然后，我们可以使用jQuery的`$.ajax()`方法来发送一个异步请求，并在请求成功后执行相应的操作。

下面是一个示例代码，假设我们有一个按钮，点击按钮后向服务器发送一个新增数据的请求，并将返回的数据添加到网页中的某个区域中：

// 引入jQuery库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// HTML部分
<button id="addBtn">新增数据</button>
<div id="dataContainer"></div>
// JavaScript部分
<script>
  // 绑定按钮点击事件
  $('#addBtn').click(function() {
    // 发送异步请求
    $.ajax({
      url: 'http://example.com/addData',  // 请求的URL地址
      type: 'POST',  // 请求的方法
      dataType: 'json',  // 返回的数据类型
      success: function(response) {  // 请求成功后的回调函数
        // 将返回的数据添加到网页中的dataContainer区域
        $('#dataContainer').append('<p>' + response.data + '</p>');
      },
      error: function() {  // 请求失败后的回调函数
        alert('请求失败，请稍后重试！');
      }
    });
  });
</script>

在上面的代码中，我们首先使用`$.ajax()`方法发送一个POST请求到`http://example.com/addData`的URL地址。请求成功后，会执行一个回调函数，其中的`response`参数包含了服务器返回的数据。我们可以将这个数据添加到网页中的`dataContainer`区域中，使用jQuery的`append()`方法来实现。

需要注意的是，上面的代码中使用了jQuery的选择器来选取按钮和数据容器，这是因为jQuery库提供了强大的选择器功能，可以方便地操作DOM元素。我们还可以根据实际需求在`$.ajax()`方法中设置更多的参数，比如请求的数据、请求的头部信息等等。

总结一下，通过使用Ajax技术，我们可以在网页中实现新增内容但不刷新整个页面的效果。通过发送异步请求，获取服务器返回的数据，并将其添加到网页中的相应区域，可以提升用户体验和页面的交互性。