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

我的目的是让用户 select 一个数据库，然后对于这个数据库，我想显示第二个滚动菜单，显示这个数据库中的一些表。仅当设置了 POST 值时才会显示此滚动菜单。 offers_choice_table($_POST['base_name_choice']) 函数将此值作为参数，然后回显包含表格的滚动菜单的 HTML。我们到了！

哦，提交按钮在这里并不重要，因为我想在用户点击提交按钮之前显示我的第二个滚动菜单，所以我们忽略目标页面，好吗？

之前，一切正常：我使用了测试、条件 (isset...) 但它不是动态的，我不得不调用其他页面，...等等。现在，正如您所猜想的那样，我希望在用户 select 进入数据库后立即使用 jQuery 刷新 mypage.php，以便出现额外的菜单。

我开始听到我的滚动菜单发生了变化，但我不知道如何使用包含 selected 数据库的 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 script/method 然后根据参数生成第二个菜单用户选择的。

所以，您不需要这部分：

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

因为您将通过 ajax 调用来调用 "offers_choice_table" 方法。

您对 url 进行 ajax 调用，这将 return 第二个菜单

$.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），它就会运行。该函数中的第一个参数是服务器返回的内容。在您的情况下，它将是您 echo 编辑出的 HTML。您可以使用 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);
    }
});

使用 JQuery 刷新 HTML 表单（位于 PHP 页面）

Using JQuery to refresh an HTML form (located on a PHP page)

html

php

forms

jquery

page-refresh