使用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); 
    } 
});