在Ajax程序中訪問匿名函數中的元素時出錯

Question

我試圖在鼠標懸停時使用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>

Answer 1

我們的評論者得出的結論是，共享一個XMLHttpRequest不是一個好主意，您可能希望為每個發生的mouseover事件觸發一個新的XMLHttpRequest 。 當您在已打開/未完成的請求上調用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 ，我不確定您是否真的必須超過前兩次ActiveXObject嘗試，這只是我所見過的事情……還有更多可以“嘗試”的事情。 原始代碼中還有其他一些奇怪的東西（其他人在編輯這些代碼時沒有看）-將設置msg變量的行注釋掉，然后嘗試在下一行使用它。 .bind可能有效，但是我喜歡我提供的方式...由您決定...嘗試兩者，看看是否其中任何一個都能單獨起作用。

但是正如其他答案已經指出的那樣，如果您已經在使用jQuery，為什么不使用$.ajax ？

Answer 2

你有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'});

       }
    });
});

在Ajax程序中訪問匿名函數中的元素時出錯

問題描述

2 個解決方案

解決方案1
1 2012-11-26 20:56:17

解決方案2
0 2012-11-26 18:34:47

在Ajax程序中訪問匿名函數中的元素時出錯

問題描述

2 個解決方案

解決方案1 1 2012-11-26 20:56:17

解決方案2 0 2012-11-26 18:34:47

解決方案1
1 2012-11-26 20:56:17

解決方案2
0 2012-11-26 18:34:47