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语句

因为你正在传递价值＆＃34;嗨＆＃34;而不是＆＃34;插入＆＃34;或＆＃34;选择＆＃34;

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.";
    }

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

2 个答案: