个人中心
gpt4 book ai didi

php - 链式选择菜单效果很好，但需要稍作调整

转载 作者：可可西里 更新时间：2023-11-01 08:36:58 25 4
gpt4 key购买 nike

目前，我的链式选择菜单运行良好。

但是目前当页面加载时第一个下拉菜单是完全空的。

我更愿意用以下所有结果填充菜单:SELECT * FROM employees 然后如果用户从第二个下拉列表中选择一个选项，它将启动 AJAX 并根据选择过滤结果。

这可能吗？

这是我的文件:

dept_form.html(HTML 表单):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Employees by Department</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
    <script src="dept.js" type="text/javascript"></script>
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="" method="get" id="dept_form">
<select id="results"></select>
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
</p>
</form>

</body>
</html>

ajax.js :

// ajax.js

/*  This page defines a function for creating an Ajax request object.
 *  This page should be included by other pages that 
 *  need to perform an XMLHttpRequest.
 */

/*  Function for creating the XMLHttpRequest object.
 *  Function takes no arguments.
 *  Function returns a browser-specific XMLHttpRequest object
 *  or returns the Boolean value false.
 */
function getXMLHttpRequestObject() {

    // Initialize the object:
    var ajax = false;

    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest) {

        // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // Older IE browsers

        // Create type Msxml2.XMLHTTP, if possible:
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) { // Create the older type instead:
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }

    } // End of main IF-ELSE IF.

    // Return the value:
    return ajax;

} // End of getXMLHttpRequestObject() function.

部门.js :

// dept.js

/*  This page does all the magic for applying
 *  Ajax to an employees listing form.
 *  The department_id is sent to a PHP 
 *  script which will return data in HTML format.
 */

// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();

  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {

      // Add an onsubmit event handler to the form:
      $('#did').change(function() {

        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.

        // Get the department_id:
        var did = document.getElementById('did').value;

        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));

        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }

        // Send the request:
        ajax.send(null);

        return false; // So form isn't submitted.

      } // End of anonymous function.

    )} // End of DOM check.

  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is complete:
  if (ajax.readyState == 4) {

    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {

      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;

      // Make the results box visible:
      results.style.display = 'block';

    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }

  } // End of readyState IF.

} // End of handleResponse() function.

dept_results_ajax.php

<?php # dept_results_ajax.php

// No need to make a full HTML document!

// Validate the received department ID:
$did = 0; // Initialized value.
if (isset($_GET['did'])) { // Received by the page.
  $did = (int) $_GET['did']; // Type-cast to int.
}

// Make sure the department ID is a positive integer:
if ($did > 0) {

  // Get the employees from the database...

  // Include the database connection script:
  require_once('mysql.inc.php');

  // Query the database:
  $q = "SELECT * FROM employees WHERE department_id=$did ORDER BY last_name, first_name";
  $r = mysql_query($q, $dbc);

  // Check that some results were returned:
  if (mysql_num_rows($r) > 0) {

    // Retrieve the results:
    while ($row = mysql_fetch_array($r, MYSQL_ASSOC)) {

      ?>
      <option value="<?php echo $row['last_name']; ?>"><?php echo $row['last_name']; ?></option>
      <?php
    } // End of WHILE loop.

  } else { // No employees.
    echo '<p class="error">There are no employees listed for the given department.</p>';
  }

  // Close the database connection.
  mysql_close($dbc);

} else { // Invalid department ID!
  echo '<p class="error">Please select a valid department from the drop-down menu in order to view its employees.</p>';
}

?>

有人可以解释我需要在脚本中进行哪些更改才能实现我的要求。

非常感谢任何指点。非常感谢。

最佳答案

您可以通过两种方式做到这一点:首先，您可以让一个 PHP 脚本生成 dept_form.html(当然，它随后会变成一个 .php 文件)并将 MySQL 查询的所有结果放入菜单中；第二种(也是首选，尤其是对于大型数据集)方法是在 dept.js 中的 if (document.getElementById('results')) { 之后插入几行以加载所有数据，所以甚至在 $('#did').change 事件上设置函数之前。然后，这些行将简单地对 PHP 脚本进行 AJAX 调用并获取您需要的所有数据。

顺便说一句，您可能需要考虑使用 jQuery，这将使您在 AJAX 调用方面的生活变得更加轻松。希望这能有所帮助。

编辑

尝试使用这样的东西:

// Open the connection:
ajax.open('get', 'dept_results_ajax.php');

// Function that handles the response:
ajax.onreadystatechange = function() {
    // Pass it this request object:
    handleResponse(ajax);
}

// Send the request:
ajax.send(null);

然后，在您的 PHP 脚本中，只需将您已有的相同代码放在 else 子句下，除了处理部门 ID 所需的部分，所以几乎只要您有 $did 或 WHERE 子句。

关于php - 链式选择菜单效果很好，但需要稍作调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9317608/

25 4 0
文章推荐： c# - 你会在哪里使用 C# 运行时编译？
文章推荐： mysql - 批处理 mysql 脚本/计划运行批处理作业
文章推荐： c# - 在 C# 中为 IEnumerable 实现的 F# Seq 模块？
文章推荐： php - 具有 k/v 对和未知数字的 PDO？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com