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对象（在每个现代broswer中实现），向服务器发送请求，然后听取答案，当你得到它时，你可以相应地更新选项。 p>

简单演示

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

了解更多信息

动态和依赖形式

1 个答案: