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

Question

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

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

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

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

这是我需要的

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

我对 execute php script with ajax, 运行 a [=46] 等短语的所有搜索=] 带有 ajax onclick 的脚本和一堆其他选择导致我没有结果。

我已经尝试 fiddle 使用如下代码块，但没有成功。

<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. In your success function you were referring to $('$beslutning') which isn't anything. Instead you want to 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>

Answer 2

您可以在单击 index.php

中的内容时只传递一个参数

<button onmousedown=someFunction()>Click ME</button>
<script>
     someFunction(){
   set href value here based on your condition example one,two, three
   window.location = localhost/main.php?switchVariable = one;
}
</script>

在main.php

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

写在 beslutning.php 文件中写这个

<?php

$beslutning= $_GET['switchVariable '];
switch($beslutning)
{
case one:
echo something;
break;

case two:
echo something;
break;

?>

Answer 3

您必须运行到虚拟服务器（laragon 等）。

localhost/index.php <

PHP 作为 select 文件：index.php

   <form class="selected">
      <select name="category" id="categories">
        <option value="">vyberte si...</option>
        <option value="cuba">Rum</option>
        <option value="cola">Cola</option>
        <option value="saris">Beer</option>
        <option value="moto">Oil</option>
        <option value="barique">Wine</option>
      </select>
   </form>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="app.js"></script>

PHP 开关盒文件：ajax.php

<?php
    $category = $_POST['category'];

    switch ($category) {
        case "cuba":
            print "You must read Dickens."; 
            break;
        case "cola":
            print "Don't touche me!";
            break;
        case "moto":
            print "You will not move without me.";
            break;
        default:
            print "Great, relax it.";
    }
?>

jQueryAJAX: 文件：app.js

(function($){
    var comment = $('<div/>', { id: 'comment' }); // create new element
    var categories = $('#categories');

        comment.appendTo( $('.selected') );

        categories.change( function() {
        
           var req = $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: categories.serialize()
                     });

           req.done( function(data){
               //console.log( data);
               comment.text( data );
           })
    });
})(jQuery);

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

How do I execute a php switch case with ajax onclick and have it print the result in an H tag?

html

javascript

ajax

jquery

jquery-events