Question

您好我正在使用html，css，php，mysql和javascript创建一个网站，其中包含一些jquery。目前我有3个下拉框，动态显示示例选项如果我点击英文然后下一个下拉框显示英语的所有部分，如阅读，然后下一个将与阅读相关，这一切都完美。

我要做的是使用sql查询中每个下拉框的值来返回与这些下拉框相关的特定视频。

我需要为$ _Post使用什么类型的数组以及如何构造sql查询以便我可以提取视频的所有信息。

这是我目前用于下拉菜单的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("select#type").attr("disabled","disabled");
            $("select#category").change(function(){
            $("select#type").attr("disabled","disabled");
            $("select#type").html("<option>wait...</option>");
            var id = $("select#category option:selected").attr('value');
            $.post("select_type.php", {id:id}, function(data){
                $("select#type").removeAttr("disabled");
                $("select#type").html(data);
            });
        });

         $("select#principle").attr("disabled","disabled");
            $("select#type").change(function(){
            $("select#principle").attr("disabled","disabled");
            $("select#principle").html("<option>wait...</option>");
            var id = $("select#type option:selected").attr('value');
            $.post("select_principle.php", {id:id}, function(data){
                $("select#principle").removeAttr("disabled");
                $("select#principle").html(data);
            });
        });

        $("form#select_form").submit(function(){
            var cat = $("select#category option:selected").attr('value');
            var type = $("select#type option:selected").attr('value');
            var princ = $("select#principle option:selected").attr('value');
            if(cat>0 && type>0 && princ>0)
            {
                var result = $("select#principle option:selected").html();
                $("#result").html('your choice: '+result);
            }
            else
            {
                $("#result").html("you must choose two options!");
            }
            return false;
        });
    });
    </script>
    </head>
    <body>
        <?php include "select.class.php"; ?>
        <form id="select_form">
            Choose a category:<br />
            <select id="category">
                <?php echo $opt->ShowCategory(); ?>
            </select>
        <br /><br />

        Choose a type:<br />
        <select id="type">
             <option value="%">any...</option>
        </select>
        <br /><br />

        Choose a principle:<br />
        <select id="principle">
             <option value="%">any...</option>
        </select>
        <br /><br />

        <input type="submit" value="confirm" />
        </form>
        <div id="result"></div>
    </body>
</html>

这是运行sql查询的部分

<?php
class SelectList
{
    protected $conn;

        public function __construct()
        {
            $this->DbConnect();
        }

        protected function DbConnect()
        {
            include "db_config.php";
            $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
            mysql_select_db($db,$this->conn) OR die("can not select the database $db");
            return TRUE;
        }

        public function ShowCategory()
        {
            $sql = "SELECT * FROM subject";
            $res = mysql_query($sql,$this->conn);
            $category = '<option value="0">choose...</option>';
            while($row = mysql_fetch_array($res))
            {
                $category .= '<option value="' . $row['subject_id'] . '">' . $row['description'] . '</option>';
            }
            return $category;
        }

        public function ShowType()
        {
            $sql = "SELECT * FROM section WHERE subject_id=$_POST[id]";
            $res = mysql_query($sql,$this->conn);
            $type = '<option value="0">choose...</option>';
            while($row = mysql_fetch_array($res))
            {
                $type .= '<option value="' . $row['section_id'] . '">' . $row['description'] . '</option>';
            }
            return $type;
        }

         public function ShowPrinciple()
        {
            $sql = "SELECT * FROM principle WHERE section_id=$_POST[id]";
            $res = mysql_query($sql,$this->conn);
            $principle = '<option value="0">choose...</option>';
            while($row = mysql_fetch_array($res))
            {
                $principle .= '<option value="' . $row['principle_id'] . '">' . $row['description'] . '</option>';
            }
            return $principle;
        }   
}

$opt = new SelectList();
?>

Answer 1

这是基本的东西：

HTML - 创建用于收集数据的界面

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> (put in head)

<div class='nameinput'>Name: <input type=text /></div>
<div class='ageinput'>Age: <input type=text /></div>
<button id = 'clickme'>CLICK</button>

JS - 使用ajax收集数据并呈现给php

$('#clickme').click(function(){
  var username =  $('.nameinput').val();
  var userage =  $('.ageinput').val();
  $.ajax({
          url: 'nameofphpfile.php',
         type: POST,
         data: { name: username,
                 age: userage },
     dataType: 'json'
          })
            .done(function(){ alert('Great job!')  })
            .fail(function(){ alert('The server does not like you!) });
                                });

（注意：对我来说更困难的部分是理解回调 - 我已经切换到.done，.fail，.always的“更新”形式。

PHP - grab the data passed from client with ajax, and put in the db.

<!php
$name   = $_POST['username'];
$age    = $_POST['userage'];

$host        = "xxxxx";
$user        = "xxxxx";
$password    = "xxxxx";
$dbname      = "xxxxx";

$cxn = mysqli_connect($host,$user,$password,$dbname);
if (mysqli_connect_errno()) {echo "No connection" . mysqli_connect_error();}

$query = " INSERT INTO nameofyourtable
     ( name, age)
     VALUES
     ('$name', '$age') " ;
$result = mysqli_query($cxn, $query) or die ("could not query database 1");
?>

如果您想要读取数据，方法会有所不同，但这是一个不同的问题。

祝你好运！

大约一年前我经历过这个，所以我知道你要经历的是什么。

如何使用$ _Post发布多个值，然后使用这些值

1 个答案: