javascript - 选择下拉菜单时，Jquery/AJAX 填充 HTML 表单

Question

我正在尝试在我的页面上填充表单。填充表单所需的信息是使用下拉选项的 ID 作为 SQL 语句中的 ID 从 MySQL 数据库中提取的。我想我可以将信息存储在 $_SESSION['formBookings'] 中，并在刷新时填充表单(这已经发生了，因为我在提交后使用 session 变量填充表单。

我不能在表单上附加提交按钮，因为我已经有一个提交按钮，而老板不想要另一个。我希望表单最终在选择选项时自动刷新页面。如果 SQL 语句中的数据已存储在 session 数组中，则将填充表单。

这是我到目前为止所拥有的:

JQuery:

<script>
$(document).ready(function(){
    $('select[name=recall]').on('change', function() {var recall = $(this).val() 
    //$(function () 
      //{
        //-----------------------------------------------------------------------
        // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
        //-----------------------------------------------------------------------
        $.ajax({                                      
          url: 'recall.php',                  //the script to call to get data          
          data: "recall: recall",             //you can insert url argumnets here to pass to api.php
                                           //for example "id=5&parent=6"
          dataType: 'json',                //data format      
          success: function(data)          //on recieve of reply
          {
            var id = data[0];              //get id
            var vname = data[1];           //get name
            //--------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------
            $('div#box1').load('DFBristol.html');//html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
            //recommend reading up on jquery selectors they are awesome 
            // http://api.jquery.com/category/selectors/
          //} 
          });
        });
      });
    });
</script>

HTML:

<select name='recall' id='recall'>
                    <option selected></option>
                        <?php
                            session_start();
                            $user = 'root';
                            $pass = '';

                            $DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass);
                            $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                            $DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

                            $recall = $DBH->prepare('SELECT * FROM bookings WHERE dateInputted >= now() - INTERVAL 2 DAY');
                            $recall->execute();
                            $recallResult = $recall->fetchALL(PDO::FETCH_ASSOC);

                            foreach ($recallResult as $key) {
                                echo '<option id='.$key["ID"].'>'.$key['ID'].' - '.$key['branch'].' - '.$key['title'].' '.$key['firstName'].' '.$key['lastName'].'</option>';
                            }
                        ?>
                    </select><br />

SQL 文件(recall.php):

<?php
$user = 'root';
$pass = '';

$DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass);
$DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

$recall = $DBH->prepare("SELECT * FROM bookings WHERE ID = '%$recall%'");
$recall->execute();
$recallFormResult = $recall->fetchALL(PDO::FETCH_ASSOC);

echo json_encode($recallFormResult);

？>

我尝试使用 data 参数将变量“recall”从 jquery 传递到 SQL 语句中，但没有任何反应。

有人可以帮助我了解我做错了什么以及如何解决它。

Answer 1

快速浏览一下，您迄今为止发布的代码似乎存在两个问题:

AJAX 请求

尽管$.ajax() defaults to a request type of GET by default ，最好指定它。您的请求中还存在语法错误 - 您已使用 }); 关闭了 success 回调，其中它应该仅为 }:

$.ajax({                                      
    url: "recall.php",
    data: {
        recall: recall
    },
    type: "GET",               // Declare type of request (we use GET, the default)
    dataType: "json",
    success: function(data)
    {
        var id = data[0];
        var vname = data[1];
        $('div#box1').load('DFBristol.html');
    }                         // The problematic closure
});

更好:不要使用已弃用的 jqXHR.success() 函数，而是使用 .done() Promise 对象，即:

$.ajax({                                      
    url: "recall.php",
    data: {
        recall: recall
    },
    type: "GET",               // Declare type of request (we use GET, the default)
    dataType: "json"
}).done(function() {
    // Success
    var id = data[0],
        vname = data[1];
    $('div#box1').load('DFBristol.html');
});

修复文件recall.php

当您向 recall.php 发出 AJAX GET 请求时，该文件需要知道您打算传递哪些变量，而您尚未定义这些变量。您可以使用 $_GET[] ( see doc ) 来做到这一点，即:

<?php
// Assign the variable $recall with the value of the recall query string from AJAX get request
// I recommend doing a check to see if $_GET['recall'] is defined, e.g.
// if($_GET['recall']) { $recall = $_GET['recall']; }
$recall = $_GET['recall'];

// The rest of your script, unmodified
$user = 'root';
$pass = '';

$DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass);
$DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

$recall = $DBH->prepare("SELECT * FROM bookings WHERE ID = '%$recall%'");
$recall->execute();
$recallFormResult = $recall->fetchALL(PDO::FETCH_ASSOC);

echo json_encode($recallFormResult);
?>

注意:但是，如果您选择发出 POST 请求，则应使用 $_POST[] ( see doc ) :)