javascript - 如何发送两个ajax请求，一个动态加载元素，另一个从后台获取数据填充刚才动态加载的元素

Question

先发起一个请求动态加载页眉，然后等页眉加载完成后，再次发送请求获取用户名来填充页眉。关键是很不稳定，有时能填充，有时不能，会不会是因为异步的原因，还没加载完成，下一个请求有执行了，所以找不到该元素？该怎么解决呢？

Answer 1

两个比较浅显的解决方案 最直接的就是嵌套ajax，还有一种关闭ajax的异步，使用同步就不会导致后面的先完成 不过会阻塞js的运行和网页解析(网络不好的前提下)，建议还是采用第一种

Answer 2

是异步的原因，
所以你不能合并一下吗，加载一段已经填充了数据的html片段啊，把填充这数据这个工作放到后台，由后台进行处理。

你第一次发送ajax请求获取到的就是已经填充好数据的页眉。

如果非要使用发两次请求的方式，那么你就把第二次请求的写的到第一次的回掉函数里，等第一次加载模板成功了，再去请求数据。

Answer 3

当连续的异步操作依赖控制流的执行顺序时，推荐用 ES6 的 Promise 和 ES7 的 Async 来处理。

以下代码需要使用 Babel 进行转换。

// 简易包装一下 jQuery 的 ajax 方法
const simpleAjaxWrapper = (url) => {
  return new Promise((resolve, reject) => {
    $.get(url, resolve)
  })
}

const getPageHeader = () => simpleAjaxWrapper('页眉信息 url')
const getUserName = () => simpleAjaxWrapper('用户信息 url')

// 用 async 做异步控制
const init = async () {
  // 先拿到页眉
  const pageHeader = await getPageHeader()
  // 再等待用户名
  const userName = await getUserName()
  // 两者都拿到之后填充一下
  console.log(pageHeader + ',' + userName)
}

// 嗒哒，完成~~~
init()

Answer 4

不用异步处理的库的话，就请求嵌套吧，在一个请求的回调中执行另外一个请求

Answer 5

在第一个请求的回调里面填充页眉

Answer 6

$·ajax({

    $.ajax({});

});
最笨最直接的方法