使用 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”，其中声明了我在这里使用的所有函数。 offer_choice_DB() 显示一个滚动菜单，我可以在其中选择一个数据库（实际上，此函数执行 MySQL 查询并在滚动菜单中回显结果）。如果用户选择一个数据库，则 $_POST['base_name_choice'] 存在。确实如此，因为当我只使用 PHP/HTML 时，一切都很好。

我的目的是让用户选择一个数据库，然后对于这个数据库，我想显示第二个滚动菜单，显示这个数据库中的一些表。仅当设置了 POST 值时才会显示此滚动菜单。 offer_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']);
}

因为您将使用 ajax 调用来调用“offers_choice_table”方法。

您对将返回第二个菜单的 url 进行 ajax 调用

$.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

您应该在新的 PHP 文件中使用 GET 而不是 POST：

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 你 echoed。您可以使用 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);
    }
});