我正在制作一个使用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">
然而,重新加载整页内容只是消失,不会再出现。我做错了什么?
答案 0 :(得分:0)
替换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