使用JQuery刷新HTML表單（位於PHP頁面上）

Question

我想要更新表單，更確切地說，我希望顯示額外的滾動菜單，具體取決於用戶在第一個滾動菜單中的選擇。

我有一個頁面，mypage.php頁面上有一個窗體。這裏是：

<form method="post" action="wedontcare.php" enctype="multipart/form-data"> 

    <label for="base">3 - Select a DB </label><br /> 

<?php 
include 'functions.php'; 
offers_choice_DB(); 
if (isset($_POST['base_name_choice'])){ 
    offers_choice_table($_POST['base_name_choice']); 
} 

我有一個分離的文件「functions.php」在哪裏聲明所有我在這裏使用的函數。 offers_choice_DB（）顯示一個滾動菜單，我可以選擇一個數據庫（實際上，這個函數執行一個MySQL查詢並在滾動菜單中回顯結果）。如果用戶選擇一個數據庫，則存在$ _POST ['base_name_choice']。它確實如此，因爲當我只使用PHP/HTML時，一切都很好。

我的目的是讓用戶選擇一個數據庫，然後對於這個數據庫，我想顯示第二個滾動菜單，顯示這個數據庫中的一些表格。只有在設置了POST值後纔會顯示該滾動菜單。 offering_choice_table（$ _ POST ['base_name_choice']）函數將此值作爲參數，然後回顯包含表格的滾動菜單的HTML。我們到了 ！

呵呵，提交按鈕在這裏並不重要，因爲我想在用戶點擊提交按鈕之前顯示我的第二個滾動菜單，所以我們只是忽略目標頁面，好嗎？

之前，一切正常：我使用測試，條件（isset ...），但它不是動態的，我不得不打電話給其他頁面......等等。現在，我想，正如你所猜測的那樣，只要用戶選擇一個數據庫以便出現額外的菜單，就可以使用jQuery來刷新mypage.php。

我開始聽我的滾動菜單中的變化，但我不知道該怎麼做來刷新我的頁面與POST參數包含選定的數據庫。無論如何，這裏是我的代碼：

<script type="text/javascript"> 
      $('#base_name_choice').change(function() { 
       var val = $(this).val(); //here I retrieve the DB name 
       alert(val); //I notify myself to check the value : it works 

       $.ajax({ 
        type: 'POST', //I could have chosen $.post... 
        data: 'base_name_choice='+val, //I try to set the value properly 
        datatype: 'html', //we handle HTML, isn't it ? 
        success: function(){ 
         alert("call ok"); //displays if the call is made 

        //and here...???? I don't know whatto do 

        } 
       }) 

      }); 
     </script> 

這裏是...任何幫助將不勝感激！謝謝:)

問候

Answer 1

這裏的問題是，你的頁面呈現第一（HTML + PHP的預處理）。這意味着，一旦您的頁面被渲染，您將無法直接進行php方法調用，例如offers_choice_table或更改$_POST參數。

您通常如何做到這一點，是通過從您的JavaScript到PHP腳本/方法進行AJAX調用，而不是根據用戶選擇的參數生成第二個菜單。

所以，你不需要這個部分：

if (isset($_POST['base_name_choice'])){ 
    offers_choice_table($_POST['base_name_choice']); 
} 

，因爲你會打電話給 「offers_choice_table」 法Ajax調用。

你讓Ajax調用的URL將返回第二個菜單

$.ajax({ 
    type: "GET", 
    url: "generate_second_menu.php", 
    data: { base_name_choice: val}, 
    success: function(data){ 
     alert("call ok"); //displays if the call is made 
     // here you can append the data that is returned from your php script which generates the second menu 
     $('form').append(data); 

    } 
}) 

Answer 2

您應該使用GET代替POST，在新的PHP文件：

if (isset($_GET['base_name_choice'])) { 
    offers_choice_table($_GET['base_name_choice']); 
} 

你應該檢查該變量有一個值集，特別是如果你的函數期望一個。你可以使用你想要在這個文件中的任何功能，它就像你會寫的任何其他PHP文件。包含你想要的任何文件。

你應該確保在查詢中使用一個GET或POST值時避免SQL注入：How can I prevent SQL injection in PHP?

在.ajax()電話，有一個回調函數success，這種運行如果服務器反應良好（即不是404或500）。該函數中的第一個參數是服務器返回的內容。在你的情況下，這將是HTML你echo編輯出來。您可以使用jQuery將響應追加到元素上：

$.ajax({ 
    type: "GET", 
    url: "generate_second_menu.php", 
    data: { base_name_choice: val}, 
    success: function(data) { 
     // it looks like you're only returning the options of the select, so we'll build out the select and add them 
     var $newSelect = $('<select></select>'); 
     $newSelect.append(data); 

     // and then add the select to the form (you may want to make this selector for specific) 
     $('form').append($newSelect); 
    } 
});