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

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

php jquery html sql ajax

Php jQuery ajax和SQL查询未按预期在HTML页面上显示,php,jquery,html,sql,ajax,Php,Jquery,Html,Sql,Ajax,我有一个ajax函数，它没有在我的html页面上正确显示。我在这里包括了错误的屏幕截图：发生了什么：ajax函数被发布到运行SQL查询的PHP文件中。在我的数据库中搜索音乐家的stagename，最终从ajax函数返回艺术家的真实姓名，并以id=namers的div形式发送我的HTML页面。当我点击一个艺术家的名字时，这个名字被存储在一个变量中，发送到ajax函数和sql查询中，并显示返回的名字值问题是：页面出现，显示重复的艺术家名称，但2-3秒后，元素完全消失。在GIF中，我只点击了一次

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

发生了什么：ajax函数被发布到运行SQL查询的PHP文件中。在我的数据库中搜索音乐家的stagename，最终从ajax函数返回艺术家的真实姓名，并以id=namers的div形式发送我的HTML页面。当我点击一个艺术家的名字时，这个名字被存储在一个变量中，发送到ajax函数和sql查询中，并显示返回的名字值

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

我想要的是：我想艺术家的名字只出现一次，我想在页面上静态显示的名称。我想阻止这个部门消失。当我单击一个艺术家的名字时，我希望在单击另一个艺术家之前显示具有他们真实姓名的元素。每次访问只需将每个名称加载到站点一次

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:

HTML:

那么，你到底在点击什么，HTML中没有.artists或LI？@adeneo我最初因为其大小而排除了这部分代码，但我已经更新了我的问题，现在包含了我所有的HTML代码。

<?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();}              
        ?>

<!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>