Question

我正在制作一个使用PHP和Ajax / jQuery更改网站语言的小脚本。我想要在不重新加载页面的情况下刷新页面内容。到现在为止我已经做到了这个

$( "a[data-request]" ).click(function() {
    var xhr = new XMLHttpRequest();
    var request = $(this).attr('data-request');
    var what = $(this).attr('data-to');
    xhr.open('GET', '{{ site_url }}' + what + '/' + request);
    xhr.onload = function() {
        if (xhr.status === 200) {
            $("#body").load(location.href + " #body");
        }
    };
    xhr.send();
});

当我点击链接

<a data-request="english" data-to="home/language" href="#">

它成功地在后台执行uri请求并“重新加载”#body元素，这是全身

<body id="body">

然而，重新加载整页内容只是消失，不会再出现。我做错了什么？

Answer 1

替换xhr.onload，因为它未在所有浏览器中实施，请改用onreadystatechange

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; 
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) 
      $("html").html(xhr.response);
  }
};

 xhr.open('GET', '{{ site_url }}' + what + '/' + request); //<-- note must come after above event handler

注意：这也会擦除你的按钮（你点击一个来获取页面）。而不是body在某些div中加载这些数据。

EDIT 我想你的代码是这样的

$(document).ready(function(){

    $(langDropdown).change(function(){
       //get selected language
       //do ajax
    });
});

现在假设你改变了lang。到西班牙语服务器发送一个西班牙语版本，所以你从服务器得到的有点像

<html>
<head> ....title.....  
<script src=....></script>  //common libs like jquery etc
<script src=my.js></script> //this would be js contaning above code
</head>

<body>
   Esta es una pagina
</body>
</html>

现在，当您使用document.write放置意大利页面时，document.ready将不会被调用（为什么？因为它仅在实际页面刷新时调用）所以change事件处理程序不会受到束缚。选择下拉列表

解决方案： document.ready之外的代码肯定会在通过ajax获取时运行，但我不会建议，而是我建议的是你要在ajax完成时运行的任何代码（如事件绑定）在{{1之后写成功回调/ readyState

document.write

jQuery重新加载不正确

1 个答案: