如何将AJAX调用返回的数据应用到实时搜索功能中

你遇到的问题本质是 $.ajax 默认执行异步请求，函数执行到 return k 时，AJAX 还没有收到服务端返回结果，success 回调函数还未执行，所以返回的始终是初始定义的空字符串。另外你代码中用到的 k、visitors、i 都没有加变量声明，会造成全局变量污染，也可能引发不可预期的变量覆盖问题。

这里提供两种常用的解决方式，任选其一即可：

方案1：回调函数实现（兼容性好） #

将后续需要用到返回数据/渲染结果的逻辑，通过回调函数传入，在AJAX请求完成后触发回调：

function returnVistors(callback){
    let k = '';
    $.ajax({
        type:'GET',
        url:'/my-url/list',
        success:function(data){
          const visitors = data.visitors
          document.getElementById('spinner').classList.add('non-visible')
          for(let i = 0;i < visitors.length; i++){
            const id = visitors[i]['id']
            const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/,parseInt(id));
            // 这里注意你原来的DOM结构有问题：p标签放在了a标签外，点击文字无法跳转，已经修正
            k+=`<a href="${detail_url}" class="flex hover:bg-purple-900 hover:text-white items-center border rounded-xl mt-1 p-2">
                  <p class="mr-2">${visitors[i]['full_name']} - ${visitors[i]['city']}</p>
                </a>`;
          }
          document.getElementById('visitors_results').innerHTML = k
          // 执行回调，把渲染结果和原始数据都传出去，你可以按需取用于搜索逻辑
          callback && callback({
              renderHtml: k,
              visitorList: visitors
          })
        },
        error: function(err){
          callback && callback(null, err)
        }
      });
}

// 调用示例
returnVistors(function(res, err){
    if(err) {
        console.log('请求失败', err)
        return
    }
    console.log(res.renderHtml) // 拿到渲染好的HTML
    console.log(res.visitorList) // 拿到原始访客数据，可以直接传给你的搜索逻辑
})

方案2：Promise + async/await 实现（写法更简洁，推荐现代项目使用） #

把AJAX请求包装成Promise实例，支持异步等待获取结果：

function returnVistors(){
    return new Promise((resolve, reject) => {
        let k = '';
        $.ajax({
            type:'GET',
            url:'/my-url/list',
            success:function(data){
              const visitors = data.visitors
              document.getElementById('spinner').classList.add('non-visible')
              for(let i = 0;i < visitors.length; i++){
                const id = visitors[i]['id']
                const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/,parseInt(id));
                k+=`<a href="${detail_url}" class="flex hover:bg-purple-900 hover:text-white items-center border rounded-xl mt-1 p-2">
                      <p class="mr-2">${visitors[i]['full_name']} - ${visitors[i]['city']}</p>
                    </a>`;
              }
              document.getElementById('visitors_results').innerHTML = k
              // 返回结果
              resolve({
                  renderHtml: k,
                  visitorList: visitors
              })
            },
            error: reject
        });
    })
}

// 调用示例
async function loadVisitorData() {
    try {
        const res = await returnVistors()
        console.log(res.renderHtml)
        console.log(res.visitorList) // 直接把这个数组传给你的搜索逻辑即可
    } catch(err) {
        console.log('请求失败', err)
    }
}
loadVisitorData()

你原来的HTML拼接逻辑存在结构错误：p标签被放在了a标签外部，导致点击访客名字无法跳转，上述方案代码中已经同步修正了这个问题。

内容的提问来源于stack exchange，提问作者artiest