如何使用AJAX替换页面标签？执行后页面无变化问题求助

你的问题出在两个关键地方：load()方法的用法错误，以及dataType配置不匹配。

错误分析 #

• load()方法用错了：jQuery的load()是用来直接加载某个URL的内容到指定元素里，而不是把已拿到的ajax响应内容塞进去。你已经在success回调里拿到了response，应该用html()方法来替换元素内容。
• dataType配置不对：你设置了dataType: 'json'，但如果后端返回的是你需要的<iframe>HTML片段，这个配置会让jQuery把响应当成JSON解析，反而会出问题（如果返回的是纯HTML，甚至会报错）。如果后端返回的是HTML，要么删掉这个配置，要么改成dataType: 'html'。

修正后的代码 #

情况1：后端直接返回HTML片段（就是你要的<iframe src="#"></iframe>） #

function myVid() {
  $.ajax({
    url: 'my_url_here',
    type: 'GET',
    // 删掉dataType让jQuery自动识别响应类型，或者改成dataType: 'html'
    cache: false,
    success: function(response) {
      console.log(response);
      // 用html()替换元素内容，而非load()
      $('#liveData').html(response);
    }
  });
}

情况2：后端返回JSON（比如{ "content": "<iframe src='#'></iframe>" }） #

如果后端确实返回JSON，需从JSON里取出HTML内容再替换：

function myVid() {
  $.ajax({
    url: 'my_url_here',
    type: 'GET',
    dataType: 'json', // 此时保留json配置
    cache: false,
    success: function(response) {
      console.log(response);
      // 假设HTML内容存在response.content字段中
      $('#liveData').html(response.content);
    }
  });
}

额外简化写法 #

如果只是要加载某个URL的HTML到#liveData，其实不用写完整的ajax，直接用load()一步到位：

function myVid() {
  $('#liveData').load('my_url_here');
}

这个写法会自动发起GET请求，把目标URL的内容加载到元素里，比手动写ajax更简洁。

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