Question

我正在学习ajax并制作了一个脚本，根据用户在另一个选择框中选择的内容添加一个选择框，但它似乎不起作用，有人能告诉我什么是错的吗？

Categories.js

// Initialize the object:
var ajax = false;

// Create the object...

// 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 (e1) { // Create the older type instead:
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) { }
    }

}

// Send an alert if the object wasn't created.
if (!ajax) {
    alert ('Page functionality is unavailable.');
}

// Function that starts the Ajax process:
function categories_chain(username) {

    // Confirm that the object is usable:
    if (ajax) { 

        // Call the PHP script.
        // Use the GET method.
        // Pass the username in the URL.
        ajax.open('get', 'categories.php?' + encodeURIComponent(username));

        // Function that handles the response:
        ajax.onreadystatechange = handle_check;

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


} // End of check_username() function.

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

    // If everything's OK:
    if ( (ajax.readyState == 4) && (ajax.status == 200) ) {

        // Assign the returned value to a document element:
        document.getElementById('cat2').innerHTML = ajax.responseText;

    }

} // End of handle_check() function.

categories.php

<?php
if(isset($_GET['1'])) {
    echo <<<HERE_DOC
<option value="1.1">Antiquities &gt;</option>
<option value="1.2">Architectural &amp; Garden &gt;</option>
<option value="1.3">Asian Antiques &gt;</option>
<option value="1.4">Books &amp; Manuscripts &gt;</option>
<option value="1.5">Decorative Arts &gt;</option>
<option value="1.6">Ethnographic &gt;</option>
<option value="1.7">Furniture &gt;</option>
<option value="1.8">Home &amp; Hearth &gt;</option>
<option value="1.9">Linens &amp; Textiles (Pre-1930) &gt;</option>
<option value="1.10">Maps, Atlases &amp; Globes &gt;</option>
<option value="1.11">Maritime &gt;</option>
<option value="1.12">Mercantile, Trades &amp; Factories &gt;</option>
<option value="1.13">Musical Instruments (Pre-1930) &gt;</option>
<option value="1.14">Periods &amp; Styles &gt;</option>
<option value="1.15">Primitives</option>
<option value="1.16">Restoration &amp; Care &gt;</option>
<option value="1.17">Rugs &amp; Carpets &gt;</option>
<option value="1.18">Science &amp; Medicine (Pre-1930) &gt;</option>
<option value="1.19">Sewing (Pre-1930) &gt;</option>
<option value="1.20">Silver &gt;</option>
<option value="1.21">Reproduction Antiques</option>
<option value="1.22">Other</option>
HERE_DOC;
}

if(isset($_GET['2'])) {
    echo <<<HERE_DOC
<option value="60435">Direct from the Artist &gt;</option>
<option value="158658">Art from Dealers &amp; Resellers &gt;</option>
<option value="52524">Wholesale Lots &gt;</option>
HERE_DOC;
}
?>

post_categories.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="categories.js" type="text/javascript" language="javascript">                                           </script>
</head>
<body>
<form name="postadd">
    <div id='div1'>
        <select name="cat1"     onChange='categories_chain(cat1.options[selectedIndex].value)'>
            <option value="1">Antiques &gt;</option>
            <option value="2">Art &gt;</option>
            <option value="3">Automotive &gt;</option>
        </select>
    </div>
    <div id='div2'>
    </div>
</body>
</html>

Answer 1

当您打开ajax对象时，需要一个使请求异步的布尔参数。由于您定义了onreadystatechange变量，因此您可能希望将其设置为真。

帮助ajax脚本

1 个答案: