使用 AJAX 和 Jquery 将变量从 Javascript 传递到 PHP

Question

我正在尝试编写一个简单的网页，将数据从 html 页面发送到 php 脚本并从 php 接收一些数据。 我试图用 ajax 来做到这一点，但 php 脚本甚至从未运行过。

这是 HTML。

<script>
$(document).ready(function(){
    $('.button').click(function(){
    alert("hi");
        var clickBtnValue = "hi";
        var ajaxurl = 'add.php',
        data =  {'action': clickBtnValue};
        $.post(ajaxurl, data, function (response) {
            // Response div goes here.
            alert("action performed successfully");
        });
    });

});
</script>

这就是PHP。

<?php
if (isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'insert':
            insert();
            break;
        case 'select':
            select();
            break;
    }
}

function select() {
    echo "The select function is called.";
    exit;
}

function insert() {
    echo "The insert function is called.";
    exit;
}
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>

这也包括在内。 我真的不明白为什么它不运行 PHP 脚本。 我是否试图使用过时的命令？

编辑：添加按钮 HTML 代码

 <div class="ui one column stackable center aligned page grid">
    <div class="column twelve wide">
        <form>
            <button id = "submit_query" type = "button" class="ui green button">Submit</button>
        </form>
    </div>
</div>

Answer 1

php脚本不执行的原因是，它不满足switch语句

因为您正在传递值“hi”而不是“insert”或“select”

var clickBtnValue = "insert";//here value is hi instead of insert or select
        var ajaxurl = 'add.php',
        data =  {'action': clickBtnValue};
        $.post(ajaxurl, data, function (response) {
            // Response div goes here.
            alert("action performed successfully");
        });
    });

Answer 2

您的 HTML 表单

<div class="ui one column stackable center aligned page grid">
        <div class="column twelve wide">
            <form>
            <input type="hidden" name="action" value "insert"> <!-- either insert or select -->
                <button id = "submit_query" type = "button" class="ui green button">Submit</button>
            </form>
        </div>
    </div>

在你的 Js 中相应地编辑它

    $("form").submit(function(event){

        // stop the form from submitting
        event.preventDefault();

        var $form = $(this);

        // Get input from all the fields
        var $inputs = $form.find("input, select, button, textarea");

        // Serialize the data in the form
        var serializedData = $form.serialize();

        $.post('/add.php', serializedData, function(response) {
        // Log the response to the console
            console.log("Response: "+response);
        });

    });

有了这个，您可以将数据传递给 add.php

接下来你可以使用它来获取它

        if (isset($_POST['action'])) {
        switch ($_POST['action']) {
            case 'insert':
                insert();
                break;
            case 'select':
                select();
                break;
        }
    }

    function select() {
        echo "The select function is called.";
    }

    function insert() {
        echo "The insert function is called.";
    }