php - 如何在div中运行php函数而无需每次刷新

Question

所以我有一个每次刷新页面时都会运行的 PHP 脚本。我还有一个标有“Spin Number”的按钮，用于刷新页面。

Website URL (Check for yourself)

正如你所看到的，一旦刷新，方 block 内的图片就会发生变化，随机数也会发生变化。

每次刷新页面时都会运行以下脚本。我希望当在正方形内按下按钮时运行此代码。

<?php 
    $mainText = "black";
    $mainNumber = "red";
    $animation = "animated rubberBand";
    $font = "font-family: 'Montserrat', sans-serif;";
    $var = rand (1,110);

    switch($var) {
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
        case 7:
        case 8:
        case 9:
        case 10:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You got a Respin!</p>';
            echo '<img class = "'.$animation.'" src="respin3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 11:
        case 12:
        case 13:
        case 14:
        case 15:
        case 16:
        case 17:
        case 18:
        case 19:
        case 20:
        case 21:
        case 22:
        case 23:
        case 24:
        case 25:
        case 26:
        case 27:
        case 28:
        case 29:
        case 30:
        case 31:
        case 32:
        case 33:
        case 34:
        case 35:
        case 36:
        case 37:
        case 38:
        case 39:
        case 40:
        case 41:
        case 42:
        case 43:
        case 44:
        case 45:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Case!</p>';
            echo '<img class = "'.$animation.'" src="case3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 46:
        case 47:
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Classified</p>';
            echo '<img class = "'.$animation.'" src="classified3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 58:
        case 59:
        case 60:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Mil-Spec</p>';
            echo '<img class = "'.$animation.'" src="milspec3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was  '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 61:
        case 62:
        case 63:
        case 64:
        case 65:
        case 66:
        case 67:
        case 68:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You got a Double Spin!</p>';
            echo '<img class = "'.$animation.'" src="doublespin3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 69:
        case 70:
        case 71:
        case 72:
        case 73:
        case 74:
        case 75:
        case 76:
        case 77:
        case 78:
        case 79:
        case 80:
        case 81:
        case 82:
        case 83:
        case 84:
        case 85:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Mil-Spec</p>';
            echo '<img class = "'.$animation.'" src="milspec3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was  '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 86:
        case 87:
        case 88:
        case 89:
        case 90:
        case 91:
        case 92:
        case 93:
        case 94:
        case 95:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Restricted</p>';
            echo '<img class = "'.$animation.'" src="restricted3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was  '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 96:
        case 97:
        case 98:
        case 99:
        case 100:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Classified</p>';
            echo '<img class = "'.$animation.'" src="classified3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 101:
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Covert!</p>';
            echo '<img class = "'.$animation.'" src="covert3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 102;
        case 103;
        case 104;
        case 105;
        case 106;
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You got a Double Spin!</p>';
            echo '<img class = "'.$animation.'" src="doublespin3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        case 107;
        case 108;
        case 109;
        case 110;
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">You unboxed a Mil-Spec</p>';
            echo '<img class = "'.$animation.'" src="milspec3.png" width=300 height=300 style="display:block;margin-left:auto;margin-right:auto;"/>';
            echo '<p style="color:'.$mainText.';text-align:center;'.$font.'">Your random number was  '.'<span style="color:'.$mainNumber.'">'.$var.'<span>'.'</p>';
            break;
        };
?>

我用过

<?php include 'random.php'; ?> 

让脚本在该页面中运行。

Answer 1

如果你想动态加载 php 片段，你将需要 ajax 。具体是这样的:

var jqxhr = $.ajax( "example.php" )
    .done(function() {
        alert( "success" );
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        alert( "complete" );
    });

然后:

$('body').append(jqxhr)

(我从 jQuery 网站获取了以上内容)