Question

我有一个无法在我的html页面上正确显示的ajax函数。我在这里包含了错误的屏幕截图：

发生了什么： ajax函数被POST到我运行SQL Query的PHP文件中。在我的数据库中搜索音乐家的舞台名称，最终从ajax函数返回艺术家的真实姓名，并将我的HTML页面发送到id =“＃namers”的div中。当我点击艺术家名称时，该名称存储在一个变量中，发送到ajax函数和sql查询，并显示返回的名称值。

问题： 页面出现，显示艺术家姓名（重复），但2-3秒后，元素完全消失。在GIF中，我只点击一次，艺术家的名字。每次单击事件都会触发ajax函数，然后触发SQL查询。

我想要的是什么： 我希望艺术家的名字只出现一次，我希望这个名字在页面上静态显示。我想阻止div消失。当我点击一个艺术家名字时，我想要显示带有真实姓名的元素，直到点击另一个艺术家。每次访问时，每个名称只需加载一次。

jQuery的：

$(document).ready(function () {
$('#namers').hide();
$('#prf').hide();
$('.artists').click(function () {
    $('.mainpage').hide();
    $('#prf').show();
    }); //when .artists is clicked   
 $('li').click(function () {
    var name = $(this).text();
    $('#prf').attr("class",name);
    $('#pic').attr("class",name);
    $('#info').attr("class",name);        
    $.post("ajax-name.php", {name: name}, function( html ) { 
        $('#namers').html(html);
    }) //POST function
    $('#namers').show();
 }); //when 'li' clicked
}); //document.ready

PHP：

<?php
        //PDO
        $rname = $_POST['name'];                        
        try {    
        $db = new PDO('mysql:dbname=dbname;host=myhost;charset=utf8', 'user', 'pass');
        $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $query="SELECT realname FROM artistmaster WHERE stagename = :name";
            $stmt = $db->prepare($query);
            $stmt->execute(array("name"=>$rname));             
        $result=$stmt->fetchAll();            
        foreach($result[0] as $child) {    
            echo $child . "<br />"; }
        }
        catch(PDOExeception $e){echo $e->getMessage();}              
        ?>

HTML：

<!DOCTYPE html>

<head>  

    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <title></title>
    <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript" ></script>       

</head>
<body>
        <div class="header"><h1></h1></div>      

    <div class="mainpage">
        <h1>Get Curious. Click an artists to get started. Have fun! :)</h1>
    </div>
    <div id="prf" class="profile">
            <div id ="info" class="basicinfo">                  
                <div id="pic" class="artistphoto">Artist photo here</div>
                <div class="artistname">Name(s):<div id="namers"></div></div>
                <div id="hometown" class="hometown">Hometown:</div>           
            </div>
    </div>
<div class="leftpanel">
        <ul class="artists" >
            <li>Aly and Fila</li>
            <li>Andrew Rayel</li>
            <li>Arnej</li>
            <li>Avicii</li>
            <li>Basenectar</li>
            <li>Borgeous</li>
            <li>Bryan Kearney</li>
            <li>Caked Up</li>
            <li>Cash Cash</li>
            <li>Coone</li>
            <li>David Guetta</li>
            <li>Dimitri Vegas and Like Mike</li>
            <li>Diplo</li>
            <li>Dirtcaps</li>
            <li>DVBBS</li>
            <li>DYRO</li>
            <li>ETC! ETC!</li>
            <li>Ferry Corsten</li>
            <li>Henry Fong</li>
            <li>John Digweed</li>
            <li>Jordan Suckley</li>
            <li>Kaskade</li>
            <li>Le Castle Vania</li>
            <li>Martin Garrix</li>
            <li>M4sonic</li>
            <li>Makj</li>
            <li>Mat Zo</li>
            <li>Morgan Page</li>
            <li>Myon and Shane 54</li>
            <li>New World Sound</li>
            <li>Nicky Romero</li>
            <li>Orjan Nilsen</li>
            <li>Paris Blohm</li>
            <li>Pete Tong</li>
            <li>Richie Hawtin</li>
            <li>Romeo Blanco</li>
            <li>Skrillex</li>
            <li>Simon Patterson</li>                
            <li>Steve Aoki</li>
            <li>Swanky Tunes</li>
            <li>Tiesto</li>
            <li>TJR</li>
            <li>Woflpack</li>
            <li>Yves V</li>
            <li>Zedd</li>
        </ul>       
        </div>
            <div class="footer">
        <h1>footer</h1>
    </div>
</body>
</html>

jQuery ajax和SQL查询未在HTML页面上按预期显示

0 个答案: