Question

目前，我遇到问题，在我使用ajax加载我的第一个内容后，我的javascript功能无效。我尝试了其他解决方案，但大多数都采用jquery格式。我的是javascript格式。我试图创建一个简单的警报函数来测试函数是否被调用。但我最终收到此错误 Uncaught ReferenceError: showArtistDetails is not defined 实际上，该函数已经定义在我的head标记的顶部，但仍显示未定义。我能否知道有什么方法可以解决这个错误。

这是ajax代码：

function showArtistDetails(str) {
    if (str == "") {
        alert("hi");
        document.getElementById("artist").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
                        alert("hi1");

            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
                        alert("hi2");

            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("artist").innerHTML = xmlhttp.responseText;
                            alert("hi3");

            }
        };
        xmlhttp.open("GET","getArtist.php?title="+str,true);
                    alert("hi4");

        xmlhttp.send();
                    alert("hi5");

    }
}

这是php代码：

    echo "<td onclick=\"showArtistDetails(this.value)\">" . $row['CDTitle'] . "</td>";

我真的需要有人帮忙解决这个问题。大多数用户在jquery函数方面遇到了同样的问题但是我的用户不同。先感谢您。非常感谢帮助。

Answer 1

您的代码似乎没有错误。我发现问题，检查下面的代码。
尝试放在页面底部。
并确保使用type =＆＃34; text / javascript＆＃34;

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Fanzine</title>
</head>
<body>
    <div id="wholeThing">
        <div id="binder">
            <section id="content">
                <article>
                    <header>
                        <hgroup>
                            <h1 style="text-align:center; font-size: 20px;">Tip Top Fanzine</h1>
                        </hgroup>
                    </header>
                    <p> <!-- Content -->
                    <div style="text-align:center;">
                        <select name="category" onchange="showMusic(this.value)"><option value='1'></option><option value='10'>Chamber</option><option value='11'>Classic Rock</option><option value='12'>Classical</option><option value='13'>Comedy</option><option value='14'>Contemporary Folk</option><option value='15'>Country</option><option value='16'>Cult</option><option value='17'>Death Metal</option><option value='18'>Easy Listening</option><option value='19'>Electronic</option><option value='2'>Acid Jazz</option><option value='20'>Electronica</option><option value='21'>Folk</option><option value='22'>Free Style</option><option value='23'>General Folk</option><option value='24'>General Rock</option><option value='25'>genre</option><option value='26'>Gothic</option><option value='27'>Jazz</option><option value='28'>Jungle/Drum 'N Bass</option><option value='29'>Keyboard</option><option value='3'>Alternative</option><option value='30'>Latin</option><option value='31'>Latin Rap</option><option value='32'>Louie</option><option value='33'>Medieval</option><option value='34'>misc</option><option value='35'>Miscellaneous</option><option value='36'>Mob Hits</option><option value='37'>New Age</option><option value='38'>New Wave</option><option value='39'>Oldies</option><option value='4'>Alternative Pop/Rock</option><option value='40'>Other</option><option value='41'>Pop</option><option value='42'>Pop/Rock</option><option value='43'>Progressive Folk</option><option value='44'>Psychedelic</option><option value='45'>Rap</option><option value='46'>Rap/R&B</option><option value='47'>Reggae</option><option value='48'>RnB</option><option value='49'>Rock</option><option value='5'>Ambient</option><option value='50'>Rock/Pop</option><option value='51'>RockNRoll</option><option value='52'>Roots Reggae</option><option value='53'>Soft Rock</option><option value='54'>Soul</option><option value='55'>Soundtrack</option><option value='56'>Techno</option><option value='57'>Traditional Folk</option><option value='58'>Traditional Pop</option><option value='59'>Trip-Hop</option><option value='6'>AvantGarde</option><option value='60'>Vocal</option><option value='61'>World</option><option value='62'>World Classical</option><option value='63'>Afro-Beat</option><option value='7'>Ballad</option><option value='8'>Bluegrass</option><option value='9'>Blues</option></select>
                    </div>                </p>
                    <div id="albums"></div>
                </article>
            </section>
        </div>
    </div>
    <script>
        function showMusic(str) {
            if (str == "") {
                document.getElementById("albums").innerHTML = "";
                return;
            } else {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("albums").innerHTML = xmlhttp.responseText;
                    }
                };
                xmlhttp.open("GET","getAlbums.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>
</body>
</html>

PHP脚本

<?php
    echo "<pre>";
    print_r($_REQUEST);
    echo "</pre>";
    exit;
?>

Answer 2

你说：＆＃34;该功能已经在我的头顶标签上定义了＆＃34;

我只在head标签中看到一个命名函数： showMusic（str）

showArtistDetails 在哪里定义？

AJAX：使用ajax加载内容后，Javascript函数不起作用

2 个答案: