javascript - 如何使用 ajax onclick 执行 php switch case 并让它在 H 标签中打印结果？

Question

我有一个名为 beslutning.php 的页面，首先是一个随机生成器，然后是一个 switch case。

该页面包含在索引文件中，如下所示:

 <h1 class="cover-heading">Vores beslutning: <?php include "beslutning.php" ?></h1>

在页面加载时，它会运行脚本、匹配大小写并按预期回显结果。

这是我需要的

索引页面上的一个按钮，单击该按钮会请求再次运行 beslutning.php，以便我获得新结果。

我对诸如使用 ajax 执行 php 脚本、使用 ajax onclick 运行 php 脚本 和许多其他替代方案的短语的所有搜索都没有结果。

我试过像下面这样的代码块，但没有成功。

<script>
$(document).ready(function(){
    $("#NyBeslutning").click(function() {
        $.ajax({
            type: "POST",
            url: "beslutning.php", //Your required php page
            data: "$beslutning", //pass your required data here
            success: function(response){
                $('$beslutning').html(response);
            }
        });
    return false;
    });
</script>

<a id="NyBeslutning" class="btn btn-lg btn-default" type="button" onClick="$beslutning()">Ny beslutning</a>

这是我的 beslutning.php 的样子:

<?php
$beslutning = mt_rand(0, 1000);

switch($beslutning)
{
case 1:
    echo "something";
    break;

case 2:
    echo "something";
    break;
?>

谁能帮忙？像我是个婴儿一样向我解释 :)

提前致谢。

Answer 1

您很接近，但是您的 jQuery 代码存在一些大问题。在使用它们之前，请尝试阅读这些东西的文档!

你没有发送任何数据，所以不需要 POST 并且可以做 a simple GET request .在您的成功功能中，您指的是 $('$beslutning') 这不是什么。相反，你想 refer to your H1 element .而且，您忘记了用大括号括住某些代码。

在 HTML 端，您不需要 onclick 属性，因为您已经声明了 click listener在脚本中。试一试，如果不起作用，请检查浏览器的错误控制台。

<script>
$(document).ready(function(){
    $("#NyBeslutning").click(function() {
        $.get("beslutning.php", function(response) {
            $('h1.cover-heading').html(response);
        });
    });
});
</script>

<h1 class="cover-heading">Vores beslutning: <?php include "beslutning.php" ?></h1>
<button id="NyBeslutning" class="btn btn-lg btn-default">Ny beslutning</button>