随机字符串选择器每页加载仅执行一次

时间:2014-07-19 00:15:46

标签: javascript php jquery html

当您按下链接文本时,它应该从文件中提供一个随机字符串,它在第一次单击时会执行。但是第二次点击没有任何反应,我需要在再次执行之前刷新页面..

代码:

function randomName() {
    $names = file('layout/sub/names.txt', FILE_IGNORE_NEW_LINES);
    $array = array_rand($names);
    return $names[array_rand($names)];
}

<div class="randomName">

</div>

<button class="aardvark">Pick random name</button>

<script>
$(document).on('click','.aardvark', function(e){
    $('.randomName').html('<?php echo randomName(); ?>');
});
</script>

1 个答案:

答案 0 :(得分:0)

问题是老的PHP是服务器端而且javascript(jQuery)是客户端问题,你不能从javascript中调用/运行PHP,因为它已经发生了。

您需要使用AJAX重新申请新名称。这是一个复制和粘贴示例,欢迎您; p

<?php 
//is ajax
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is get name
    if(isset($_POST['get_name'])){
        $names = file('names.txt', FILE_IGNORE_NEW_LINES);
        exit(json_encode(array('resp' => $names[array_rand($names)])));
    }
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

    //get_name function
    $.fn.get_name = function(){
        var elm = $(this);
        var ajax = $.ajax({
            url: "./",
            type: "POST",
            data: {'get_name':true},
            dataType: "json"
        });
        ajax.done(function(data){
            elm.html(data.resp);
        });
        ajax.fail(function(xhr, status, error){
            elm.html("AJAX failed:" + xhr.responseText);
        });
        return this;
    };

    //do get_name on page load
    $('#randomName').get_name();

    //do get_name on button click
    $('#aardvark').on('click', function(){
        $('#randomName').get_name();
    });
});
</script>
</head>

<body>
    <div id="randomName"></div>
    <button id="aardvark">Pick random name</button>
</body>
</html>
相关问题