动态和依赖形式

Question

我想为预订脚本制作一个动态的依赖表单。 在第一个输入字段中，日期和时间将由客户填写。 在表单的第二部分，有一个下拉菜单，它将提供可用（未预订）的房间。

<form name="booking" action="<? echo $_SERVER['php_self']; ?>">
  <input type="date" name="pref_date">
  <input type="time" name="starttime">
  <input type="time" name="endtime">
  <select name="available-rooms">
     <? $sql="SELECT rooms 
              FROM bookings 
              WHERE (pref_date=pref_date)
              AND (start_time < starttime AND end_time > endtime)"; // UNTESTED

        $result=mysql_query($sql,$db);
        while($row=mysql_fetch_row($result)) { ?>
        <option value="<? echo $id; ?>"><? echo $room; ?></option>
        <? } ?>

  </select>
  <input type="text" value="name">
  <input type="submit" name="submit" value="submit">
</form>

我认为这必须通过 AJAX 或 Jquery 来完成......但我怎样才能做到这一点呢？ 有没有人有一些我可以学习的教程可以做类似的事情，或者有人有时间帮助我吗？

如上所示的代码被缩小了。

Answer 1

如果您希望页面使用仅对服务器可用的信息来响应用户输入，则需要使用 AJAX。在 vanilla javascript 中执行此操作的方式是创建一个 XMLHttpRequest 对象（在每个现代浏览器中实现），向服务器发送请求，然后侦听答案，当你得到它时，你可以相应地更新选项。

简单演示

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "getbookings.php", true);
//You can send information here to the $_GET or $_POST variable in php
xhttp.send("I love hotels");

//And to listen to the answer
xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        console.log(this.responseText);
    }
};

onreadystatechange 事件在请求状态发生变化时触发，4 表示已完成。与 200 不同的状态意味着服务器出现问题，因此请记得检查！至于 php 文件应该做什么，只需打印一个纯文本或 JSON 字符串，其中包含您需要的信息，以便它可以被 javascript 解析。

您可以在https://www.w3schools.com/js/js_ajax_http.asp阅读更多内容