Php 链式选择菜单-工作正常，但需要一个小改动-AJAX
我目前正在使用以下脚本在每次选择下拉菜单选项时运行PHP脚本效果很好。 然后，它返回SQL查询的结果，并将其放置在第二个下拉列表中 但是，我也希望在网页最初加载时运行PHP脚本 基本上，我希望我的选择菜单（“第二个下拉菜单”）将在页面首次加载时填充PHP脚本的结果。然后用户可以使用第一个下拉菜单过滤结果 这是我当前的Javascript文件。我没有使用jQueryPhp 链式选择菜单-工作正常，但需要一个小改动-AJAX,php,javascript,ajax,forms,select,Php,Javascript,Ajax,Forms,Select,我目前正在使用以下脚本在每次选择下拉菜单选项时运行PHP脚本效果很好。 然后，它返回SQL查询的结果，并将其放置在第二个下拉列表中 但是，我也希望在网页最初加载时运行PHP脚本 基本上，我希望我的选择菜单（“第二个下拉菜单”）将在页面首次加载时填充PHP脚本的结果。然后用户可以使用第一个下拉菜单过滤结果 这是我当前的Javascript文件。我没有使用jQuery // Have a function run after the page loads: window.onload = init;
// Have a function run after the page loads:
window.onload = init;
/* ------------------------------------------------------------------------
* Can I run this...
* ajax.open('get', 'dept_results_ajax.php');
* ... as soon as my page loads and return the results?
* ------------------------------------------------------------------------
*/
// 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.
// 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.
非常感谢这里的指点。为什么您使用jQuery并仍然构建自己的AJAX函数？这一切都内置于jQuery中：嗨，Florian。我并不真正了解jQuery中的AJAX。如果这有帮助的话，我已经在上面的编辑中发布了我的“ajax.js”文件内容。我只是说，如果您使用ajax的jQuery实现，您可以节省很多时间-至于您的问题，请使用
$（document）.ready（）