根据表单输入从SQL数据库中提取数据

Pulling data from SQL database depending on form input

本文关键字：数据库 提取 数据 SQL 表单 输入      更新时间：2023-09-26

我正在制作一个表单，其中更改一个"选择"元素修改另一个"选择"元素的值。这两个元素的值都来自MSSQL数据库。实现这一功能的代码的最佳方法是什么?

我能想到有两种方法来做这件事。

  1. 将表存储到一个javascript变量中，并使第一个元素的onchange事件修改第二个元素。

  2. 发送一个GET请求到页面并重新加载它，使用PHP修改第二个元素

我不喜欢第一种方法，因为将数据库从PHP端存储到javascript端似乎有点粗糙，而且非常麻烦。我也不喜欢第二种方式，因为重新加载页面会破坏用户体验，让他不得不再次向下滚动。

您应该使用AJAX来拉入数据并填充第二个选择元素。简而言之，AJAX只是在幕后发生的单独的页面请求。您可以使用它来加载一个简单的HTML页面或部分，并在DOM元素中显示它，或者您可以使用它来动态检索结构化数据。

最好的方法是使用JSON (JavaScript Object Notation)。在这种情况下，您将使用Javascript对PHP页面进行AJAX调用，该PHP页面将在表示第一个选择元素的值的查询字符串中接受一个参数。这样，您就可以调用MSSQL数据库来获取第二个选择的所有相应选项，然后将这些选项回显出来。反过来，用于发出AJAX请求的Javascript可以解析响应并将其解释为Javascript对象文字，从而允许您循环遍历结果并对它们执行所需操作。

这里有一个例子(我使用jQuery，因为它使AJAX非常简单)。

在表单页面的顶部:

$(document).ready(function() {
    $('#select1').change(function() {
        var select1val = $(this).val();
        $.getJSON('/path/to/response.php', 'select1=' + select1val, function(response) {
             $('#select2').empty();
             if(response) {
                for(var option in response) {
                    $('<option/>').val(option.value).html(option.label).appendTo($('#select2'));
                }
             }
        });
     });
});
然后你的response。php页面应该是这样的: 
<?php
$select1 = $_GET['select1'];
// Do validation here, to make sure it's a legitimate value for select1. Never trust the
// user input directly.
// Replace this with whatever code you use to make DB queries.
$options = $mydb->query("SELECT value,label FROM select2_options WHERE select1_value=?", $select1);
echo json_encode($options);

如果不想重新加载页面，请使用Ajax。阅读更多关于AJAX的信息

$('#select1').change(function() {
    var value = $(this).val();
    var dataString = 'id='+ value;
    if(value != '') 
    {
        $.ajax({
               type: "POST",
               url: "fetchOptionsForSelect2.php",
               data: dataString,
               success: function(html) {
                     $('#select2').html(html);
               }
        });
    } 
    else 
    {
        //reset select2
        $('#select2').html("<option value=''>Select value from select1 first</option>");
    }
});

这是一个独立的示例，可以满足您的要求。乍一看可能很复杂，但通过jQuery的AJAX是相当直接的。

这个例子使用了两个文件:

1) TEST.PHP -包含javascript/AJAX，和HTML与<select>控件
2) PROCESS.PHP -接收来自test.php的数据(通过AJAX)，对该数据运行MySQL查找，将HTML返回给test.php

TEST.PHP 

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#workers").change(function(event) {
                    var w = $(this).val();
//alert('Value of w is: ' + w);
//return false;
                    $.ajax({
                        type: "POST",
                        url: "process.php",
                        data: 'worker=' + w,
                        success:function(data){
//alert(data);
                            $('#laDiv').html(data);
                        }
                    }); //END ajax
                });
            }); //END $(document).ready()
        </script>
    </head>
<body>
Worker:  
<select  id="workers">
    <option>Roy</option>
    <option>John</option>
    <option>Dave</option>
</select>
<div id="laDiv"></div>
</body>
</html>

PROCESS.PHP 

<?php
$w = $_POST['worker'];
$ret = '
    Fruit Options: 
    <select id="fruitopts" name="Select2">
';
if ($w == 'Roy'){
    $ret .= '
        <option>Apples</option>
        <option>Oranges</option>
        <option>Pears</option>
    ';
}else if ($w == 'John') {
    $ret .= '
        <option>Peaches</option>
        <option>Grapes</option>
        <option>Melons</option>
    ';
}else if ($w == 'Dave') {
    $ret .= '
        <option>Nut</option>
        <option>Jelly</option>
    ';
}
$ret .= '</select>';
echo $ret;

结果如下:

。TEST.PHP -用户从下拉菜单中选择"workers"
B. change()事件触发，获取("w")的值，并将其发送给process.php
c. PROCESS.PHP在$_POST[]数组中接收一个名为w的变量键，存储在$w
d. PROCESS.PHP对选定的worker ($w的值)进行MySQL查找
PROCESS.PHP在一个名为$ret的变量中构造一些HTML，然后将其返回
f. TEST.PHP接收$中HTML字符串。Ajax成功函数
g. TEST.PHP调用接收到的数据data(-1表示原创性)
h. TEST.PHP将收到的HTML注入id=" laddiv "的DIV

希望对你有帮助。

使用http://www.appelsiini.net/projects/chained

<script src="jquery.chained.min.js"></script>
<select id="mark" name="mark">
    <?php
         foreach($select1_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
    </select>
    <select id="series" name="series">
    <?php
        foreach($select2_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
</select>
相关文章：