Ajax - 轻松实现自动刷新与搜索框自动补全

2023-05-30 14:48:25

利用 Ajax 升级你的网络应用程序：实现自动刷新和搜索框自动补全

引言

在现代网络开发中，Ajax 已成为必备技能，它允许你异步更新网页内容，无需重新加载整个页面。这种技术显著提升了用户体验，使网页更具动态性、交互性。

Ajax 异步方式的语法

Ajax 的异步方式语法如下：

$.ajax({
  data: {}, // 参数数量
  datatype: {}, // 预计返回参数类型
  url: '', // 响应地址
  type: '', // 请求方式（post/get）
  success: function (data) {}, // 正确的回应
  error: function (data) {} // 错误的回应
});

实现自动刷新

使用 Ajax 实现自动刷新非常简单。在页面加载完成后，使用 setInterval() 函数定期向服务器发送请求，更新网页内容：

$(document).ready(function() {
  setInterval(function() {
    $.ajax({
      url: 'data.php', // 服务器端数据接口
      success: function (data) {
        $('#content').html(data); // 更新网页内容
      }
    });
  }, 1000); // 每隔1秒刷新一次
});

实现搜索框自动补全

搜索框自动补全也是一项实用功能，它可以提高用户搜索效率。利用 $.ajax() 向服务器发送请求，获取候选词条并显示在搜索框下方：

$('#search').on('input', function() {
  var keyword = $(this).val();
  if (keyword.length >= 3) {
    $.ajax({
      url: 'search.php', // 服务器端搜索接口
      data: {keyword: keyword},
      success: function (data) {
        var suggestions = data.suggestions;
        $('#suggestions').empty(); // 清空候选词条容器
        for (var i = 0; i < suggestions.length; i++) {
          $('#suggestions').append('<li>' + suggestions[i] + '</li>'); // 添加候选词条
        }
      }
    });
  }
});