我正在尝试在鼠标悬停时使用ajax从文件中获取数据。一切正常,除了当我尝试访问匿名函数中的<p>
元素时,我什么也得不到。可能的原因是元素在匿名函数中丢失了范围。如果您看到可能的解决方案,请告知。
<html>
<head>
<title>MouseOver Effect And Ajax </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://localhost/study/libraries/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var xhr=false;
initAll();
$('div.pcard').mouseover(function(){
if(xhr)
{
var pname=$(this).children('p.pname').text();
var pname=pname+"_details.txt";
xhr.open("GET",pname);;
xhr.onreadystatechange=function(){
if(xhr.readyState==4)
{
if(xhr.status==200)
{
$(this).children('p.pdesc').text(""+msg);
alert($(this).children('p.pname').text());
$(this).children('p.pdesc').css({'visibility':'visible'});
}
}
}.bind(this);
xhr.send(null);
}
});
$('div.pcard').mouseout(function(){
$(this).children('p.pdesc').css({'visibility':'hidden'});
});
function initAll()
{
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
});
</script>
</head>
<body>
<h2>Interactive MouseOver</h2>
<div id="products">
<div class="pcard">
<p class="pname">Sandwhiches</p>
<p class="pdesc"></p>
</div>
<div class="pcard">
<p class="pname">Pizzas</p>
<p class="pdesc"></p>
</div>
<div class="pcard">
<p class="pname">Soups</p>
<p class="pdesc"></p>
</div>
<p style="clear:both"></p>
</div>
</body>
</html>
美国评论者得出的结论是,共享一个XMLHttpRequest
不是一个好主意,您可能希望为每个mouseover
事件发生时触发一个新。当您对已打开/未完成的请求调用open
时,事情可能会变得混乱,而send
应该没问题。通常的做法是这样的:
$(document).ready(function () {
$('div.pcard').mouseover(function () {
var self = $(this);
var pname = self.children('p.pname').text();
var pname = pname + "_details.txt";
var xhr = ajaxFunction();
xhr.open("GET", pname);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var msg = "" + xhr.responseText;
self.children('p.pdesc').text(""+msg);
//alert(self.children('p.pname').text());
self.children('p.pdesc').css({'visibility':'visible'});
}
}
};
xhr.send(null);
});
$('div.pcard').mouseout(function(){
$(this).children('p.pdesc').css({'visibility':'hidden'});
});
});
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Firefox, Chrome, Opera 8.0+, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.6.0");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.3.0");
} catch (e) {
throw new Error("This browser does not support XMLHttpRequest.");
}
}
}
}
}
return ajaxRequest;
}
在ajaxFunction
中,我不确定您是否真的必须通过前 2 次 ActiveXObject 尝试,这只是我所看到的......还有几个你可以"尝试"的。在你的原始代码中还有其他一些奇怪的事情(其他人没有看就编辑了) - 你注释掉了设置 msg
变量的行,然后你尝试在下一行使用它。.bind
可能有效,但我喜欢我提供的方式......这取决于你...尝试两者,看看其中任何一个是否单独工作。
但正如另一个答案已经指出的那样,如果你已经在使用jQuery,为什么不使用$.ajax
呢?
你有jquery,为什么要重写自己的ajax调用?
将 this 保存到局部变量中:var that = this
然后你可以重用它。
$(document).ready(function(){
$('div.pcard').mouseover(function(){
var pname=$(this).children('p.pname').text();
pname=pname+"_details.txt";
var that = this; /// keeping the scope
$.ajax({
url:pname,
success: function () {
$(that).children('p.pdesc').text(""+msg);
alert($(that).children('p.pname').text());
$(that).children('p.pdesc').css({'visibility':'visible'});
}
});
});