使用HTML / JQuery / PHP提交表單並返回值

Question

需要你的幫助...我的主頁有3個div，＃Header，＃Content，＃Footer。 所有其他頁面都在#Content div中打開。 在其中一個頁面中，我有一個包含兩個選擇列表和一個提交按鈕的表單。 只想單擊按鈕，然后將另一頁返回到#Content div，顯示我之前選擇的值。 像這樣：

起源是：1
命運是：1

但是這段代碼返回以下內容......

Notice: Undefined variable: origin in ...
Notice: Undefined variable: destiny in ...

注意：如果我不打開#Content div中的頁面，這是有效的

我的Html：

<form id="myform" name="myform" action="values.php" method="POST">
    <select id="origin" name="origin">
        <option value="0" selected>-- Select Origin --</option>
        <option value="1">Portugal</option></select>
    <select id="destiny" name="destiny">
        <option value="0" selected>-- Select Destiny --</option>
        <option value="1">Lisboa</option></select>
    <input id="btSubmit" name="btSubmit" type="submit" value="search!">
</form>

我的職責：

$(document).ready(function(){
    $('#btSubmit').click(function(e) {
        e.preventDefault();
        var url = $('#myform').attr('action');
        var method = $('#myform').attr('method');
    $.ajax({
        type: method,
        url: url,
        data: $('#myform').serialize(),
        success: $('#content').load(url)
        });
    });
});

我的values.php頁面：

<?php
    if(isset($_POST['origin']) || isset($_POST['destiny'])) 
    {
        $origin = $_POST['origin'];
        $destiny = $_POST['destiny'];
    }
    echo 'The origin is:' . $origin . '<br>';
    echo 'The destiny is:' . $destiny;
?>

Answer 1

你不應該再次調用load - 你已經用$.ajax調用了它並收到了結果。 所以你只需要在content顯示它們：

success: function (data) {
    $('#content').html(data);
}

Answer 2

您應該正確使用成功回調函數。 接受回調方法中的響應並將其設置在div中

success: function (data) {
    $('#content').html(data);
}

此外，您應該使用表單提交事件執行操作。

$('form#myform').on('submit', function (e) {

代替

$('#btSubmit').click(function(e) {

Answer 3

正如安德烈提到你必須使用

success: function (data) {
    $('#content').html(data);
}

因為調用success: $('#content').load(url)觸發新的GET請求。 當GET請求到達php代碼時， $_POST未設置且您的變量未初始化，因此您從php獲取消息：

Notice: Undefined variable: origin in