时间戳

首页 > 解决方案 > 如何使用ajax在html下拉列表中显示db的结果？

javascript - 如何使用ajax在html下拉列表中显示db的结果？

问题描述

嗨，我是 php 和 ajax 的新手，我正在尝试使用 ajax 在 html 下拉列表中显示查询结果 我的 php 是

    $pro1 = mysqli_query("select email from groups");

在这里，我尝试将结果推送到一个数组中，但现在没有出现我希望这个结果数组显示在下拉列表中

我的 html 下拉列表是

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      defer
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button
        type="button"
        class="btn btn-info btn-lg"
        data-toggle="modal"
        data-target="#shareMdl"
      >
        Open Modal
      </button>

      <!-- Modal -->
      <div id="shareMdl" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-body">
              <h3>Share with people</h3>
                <p style="color: red; display: none;" id="errUsr">
                  Please select atleast one email, to share.
                </p>
                <div id="email-list-container" class=""></div>
                
          </div>
        </div>
      </div>
  </body>
  <script defer>
    const emaiList = [];
    let emailListIndex = 1;

    $(document).ready(function () {
      addAddtionalEmail();

      

    function addAddtionalEmail() {
      if (emailListIndex < 9) {
        $("#email-list-container").append(
          `<div class="form-group" style="display:flex">
                  <select class="form-control" name="email" id="Email-${emailListIndex}" onkeyup="filter(this.value)" placeholder="option">
                    
                  </select>
                 
            </div>`
        );
        emailListIndex++;
      }
    }
    })
    
  </script>
</html>
现在我想通过将php结果推送到数组中，通过ajax在下拉列表中显示查询结果

我的 php 到目前为止我尝试过但没有工作：

 if($action == getEmails)
 $properties = array();
    $pro1 = mysql_query("select email from groups");
    if(mysql_num_rows($pro1) > 0)
    {
        while($proData = mysql_fetch_assoc($pro1))
        {
            $properties=$proData
            
            array_push($properties, $props);
        } 
    }
    echo json_encode(array('status'=>'ok', 'props'=>$properties));
  }

阿贾克斯：

window.fillData = function(){
  alert("clicked");
      $.ajax({
        type:"POST",
        dataType:"json",
        url:"memberslist.php",
        data:{
          action:"getEmails",
         },
         success : function(response)
        {

标签： javascriptphphtmljqueryajax

解决方案

我认为这应该是要走的路：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      defer
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap select -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button
        type="button"
        class="btn btn-info btn-lg"
        data-toggle="modal"
        data-target="#shareMdl"
      >
        Open Modal
      </button>

      <!-- Modal -->
      <div id="shareMdl" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-body">
              <h3>Share with people</h3>
                <p style="color: red; display: none;" id="errUsr">
                  Please select atleast one email, to share.
                </p>
                <div id="email-list-container" class="">

                    <div class="form-group" style="display:flex">
                        <select class="form-control" name="email" id="share_by_email" data-live-search="true">

                        </select>
                    </div>

            </div>

                </div>
          </div>
        </div>
      </div>
    </div>
    <script defer>
      const emaiList = [];
      let emailListIndex = 1;

      $(document).ready(function () {
        addAddtionalEmail();
      });

      /* Declare functions outside of the document-ready */
      function addAddtionalEmail() {
        $.ajax({
          type:"POST",
          dataType:"json",
          url:"memberslist.php",
          data:{action:"getEmails"},
          success: function(data){
            /* It's probably best if you check if 'props' have been set here */

            data.props.forEach(function(email) {
                $("#share_by_email").append("<option>" + email.email + "</option>");
            });
            $('#share_by_email').selectpicker();
          }
        });
      }
    </script>
  </body>
</html>

AJAX 调用在函数内部执行addAddtionalEmail()。memberslist.php 中的代码可能是这样的：

 if($action == getEmails)
    $properties = array();
    $pro1 = mysql_query("SELECT `email` FROM `groups`");
    if(mysql_num_rows($pro1) > 0)
    {
        while($proData = mysql_fetch_assoc($pro1))
        {
            array_push($proData['email'], $props);
        } 
    }
    echo json_encode(array('status'=>'ok', 'props'=>$properties));
  }

我不确定你为什么if (emailListIndex < 9) {在你的代码中，但我认为这不是必需的。

推荐阅读