javascript - 如何使用 AJAX 对选择选项执行 PHP 查询?

标签 javascript php jquery mysql ajax

好吧,我知道之前已经回答过这个问题 ( Execute PHP script on same page after selecting a dropdown list option using Ajax or JavaScript ),但是对于以前从未使用过 AJAX 的人来说,这些答案并不是很有帮助。如果有人从下拉列表中选择一个选项,我该如何运行查询?

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<h3>Subject</h3>
<select name="allbooks" >
              <option value="none" ></option>
              <option value="allbooks" >All Books</option>
    </select>

<?php 
$query = "SELECT * FROM books" or die("Error in the consult.." . mysqli_error($connection)); 
    $books = $connection->query($query);
?>

最佳答案

首先,您必须使用 Javascript 触发 AJAX 请求。但我将通过使用 jQuery(一个 Javascript 库)来指导您。

您的 HTML:

<select name="allbooks" id="allbooks">
  <option value="none" ></option>
  <option value="allbooks" >All Books</option>
</select>
<div id="show">
  <!-- ITEMS TO BE DISPLAYED HERE -->
</div>

之后,下载jQuery .

然后让我们执行脚本:

<script src="jquery-1.9.1.min.js"></script> <!-- CHANGE THE JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">
  $(document).ready(function(){ /* PREPARE THE SCRIPT */
    $("#allbooks").change(function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
      var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
      var dataString = "allbooks="+allbooks; /* STORE THAT TO A DATA STRING */

      $.ajax({ /* THEN THE AJAX CALL */
        type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
        url: "get-data.php", /* PAGE WHERE WE WILL PASS THE DATA */
        data: dataString, /* THE DATA WE WILL BE PASSING */
        success: function(result){ /* GET THE TO BE RETURNED DATA */
          $("#show").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
        }
      });

    });
  });
</script>

然后让我们创建 get-data.php,它将接收通过 AJAX 发送的数据。

if(!empty($_POST["allbooks"])){
  /* DO YOUR QUERY HERE AND GET THE OUTPUT YOU WANT */
  echo $output; /* PRINT THE OUTPUT YOU WANT, IT WILL BE RETURNED TO THE ORIGINAL PAGE */
}

您可以查看此示例 - JSfiddle .

关于javascript - 如何使用 AJAX 对选择选项执行 PHP 查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32389767/

相关文章:

javascript - 如何使用 JavaScript 或 jQuery 获取图像的自然尺寸?

javascript - jQuery 的加载功能,不允许后退按钮?

javascript - iframe.scrollTo() 不适用于 iPad 上的 Excel/PowerPoint 文档

javascript - 如何使用父变量的 id 为父的 css 类设置变量?

javascript - RxJs:使用 async/await 共享 Observable

php - PDO::commit() 成功或失败

javascript - 未捕获的语法错误 : Unexpected identifier images data json

PHP system() 给出的结果与终端不同,缺少字体

nginx - PHP 中的长时间运行脚本导致 NGINX 服务器变得非常繁忙

jquery - 如何更改 jquery html 内容?