Javascript 如何使用jquery+；AJAX

我正在尝试建立一个用户可以互相提供工作表的页面

我正在尝试使用依赖下拉列表来完成它。不确定这是否是正确的术语，因此我将提供一个示例

大致分类如下： 类型>类别>主题>工作表

大致上，我的想法是：

页面加载类型的json并显示类型下拉列表

用户将数学、科学、英语视为类型并选择数学

页面使用ajax来查询数据库，并用等级1、2、3等填充主题

使用者选择四年级

页面使用ajax查询数据库，并填充适当的4级主题

。。。一直到链条的底部

在javascript部分：

<script type="text/javascript" language="javascript">
    var types;
    var categories;
    var topics;
    var sheets;

    //load the first types
    $(document).ready(function(){
        $.ajax({
            async: false,
            url: "base_url/json_get_all_wstypes",
            type: 'POST',
            dataType: 'json',
            success: function(output_string){
                types = output_string;
            }
        });
    });

    //by default - intialize types
    $(document).ready(function(){
        var t_choices = "<select name=\"type_id\" id=\"type_picker\" >";
        t_choices += "<option value=\"\" selected=\"selected\">Select a Type</option>";

        $.each(types, function(){
            t_choices += "<option value=\"" + this.type_id.toString() + "\">";
            t_choices += this.type_name.toString();
            t_choices += "</option>";
        });

        t_choices += "</select>";

        $('#type_choices').text('');
        $(t_choices).appendTo('#type_choices');
    });

    //reaction to picking a type 
    $(document).ready(function(){
        $('#type_picker').change(function(){
            var url_arg = $('#type_picker').val().toString();
            var full_url = "base_url/json_get_wscategories_by_type/" + url_arg;

            $.ajax({
                async: false,
                url: full_url,
                type: 'POST',
                dataType: 'json',
                success: function(output_string){
                    categories = output_string;
                }
            });

            var choices = "<select name=\"category_id\" id=\"category_picker\" >"; 
            choices += "<option value=\"\" selected=\"selected\">Select a category</option>";

            $.each( categories, function() {
                choices += "<option value=\"" + this.category_id.toString() + "\">";
                choices += this.category_name.toString();
                choices += "</option>";
            });

            choices += "</select>";

            alert(choices.toString());

            $('#category_choices').text('');
            $(choices).appendTo('#category_choices');

        });
    }); 

    //reaction to picking a category (initialize topic)     
    $(document).ready(function(){
        $('#category_picker').change(function(){
            var url_arg = $('#category_picker').val().toString();
            var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;

            $.ajax({
                async: false,
                url: full_url,
                type: 'POST',
                dataType: 'json',
                success: function(output_string){
                    topics = output_string;
                }
            });

            var choices = "<select name=\"topic_id\" id=\"topic_picker\" >"; 
            choices += "<option value=\"\" selected=\"selected\">Topic a category</option>";

            $.each( topics, function() {
                choices += "<option value=\"" + this.topic_id.toString() + "\">";
                choices += this.topic_name.toString();
                choices += "</option>";
            });

            choices += "</select>";

            alert(choices.toString());

            $('#topic_choices').text('');
            $(choices).appendTo('#topic_choices');

        });
    }); 

    //reaction to picking a topic (initialize sheet)
    similar code pattern as method before it...

    //reaction to picking a sheet (intialize page)
    similar code pattern as the method before...
</script>

var类型；
var类别；
var主题；
var表；
//加载第一个类型
$（文档）.ready（函数（）{
$.ajax({
async:false，
url:“基本url/json获取所有类型”，
键入：“POST”，
数据类型：“json”，
成功：函数（输出字符串）{
类型=输出字符串；
}
});
});
//默认情况下-初始化类型
$（文档）.ready（函数（）{
var t_choices=“”；
t_choices+=“选择一种类型”；
$.each（类型、函数（）{
t_选项+=”；
t_choices+=this.type_name.toString（）；
t_选项+=”；
});
t_选项+=”；
$（“#键入_选项”）。文本（“”）；
$（t#u选项）。附加到（“#type#u选项”）；
});
//对选择类型的反应
$（文档）.ready（函数（）{
$（'#键入_picker'）。更改（函数（）{
var url_arg=$（'#type_picker'）.val（）.toString（）；
var full_url=“base_url/json_get_wscategories_by_type/”+url_arg；
$.ajax({
async:false，
url:full_url，
键入：“POST”，
数据类型：“json”，
成功：函数（输出字符串）{
类别=输出字符串；
}
});
var选择=”；
选项+=“选择一个类别”；
$.each（类别、函数（）{
选项+=”；
选项+=此.category_name.toString（）；
选项+=”；
});
选项+=”；
警报（choices.toString（））；
$（“#类别选择”）。文本（“”）；
$（选项）。附加到（“#类别#选项”）；
});
}); 
//选择类别的反应（初始化主题）
$（文档）.ready（函数（）{
$（'#category_picker'）。更改（函数（）{
var url_arg=$（'#category_picker'）.val（）.toString（）；
var full_url=“base_url/json_get_wstopics_by_category/”+url_arg；
$.ajax({
async:false，
url:full_url，
键入：“POST”，
数据类型：“json”，
成功：函数（输出字符串）{
主题=输出字符串；
}
});
var选择=”；
选项+=“主题a类别”；
$.each（主题、函数（）{
选项+=”；
选项+=此.topic_name.toString（）；
选项+=”；
});
选项+=”；
警报（choices.toString（））；
$（“#主题选择”）。文本（“”）；
$（选项）。附加到（“#主题选项”）；
});
}); 
//选择主题的反应（初始化工作表）
与之前的方法类似的代码模式。。。
//挑选工作表的反应（初始化页面）
与之前的方法类似的代码模式。。。

在网络表单部分：

<p>
<label for="type_id">Pick a sheet type:</label>
<div id="type_choices">
</div>
</p>


<p>
<label for="categories_id">Pick a category:</label>
<div id="category_choices">
</div>
</p>

<p>
<label for="topic_id">Pick a topic:</label>
<div id="topic_choices">

</div>
</p>

<p>
<label for="worksheet_id">Pick a worksheet:</label>
<div id="sheet_choices">
Please select a topic first to activate this section
</div>
</p>

选择图纸类型：


选择一个类别：


选择一个主题：


选择工作表：
请先选择主题以激活此部分

---

这适用于选择类型并加载类别的显示，但一旦我选择了类别，就不会发生任何事情。另外，如果有人能告诉我什么是网络世界，我会非常感激。动态相关下拉列表没有那么大的帮助，我不知道还能叫它什么。

您的代码不必要地依赖于jQuery，不能有效地重用代码。这个解决方案可能需要对服务器端代码进行细微的重写，但无论如何都应该更加抽象。尝试类似以下内容：

<html>
<body>
<select id="type" onchange="updateNext(this, 'category')">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<select id="category" onchange="updateNext(this, 'topic')">
</select>
<select id="topic" onchange="updateNext(this, 'worksheet')">
</select>
<script>
    function updateNext(el, nextName) {
        var url_arg = el.value;
        var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;
        var options, txtStrng;
        //grab ajax data
        $.ajax({
            async: false,
            url: full_url,
            type: 'POST',
            dataType: 'json',
            success: function(output_string){
                options= output_string;
            }
        });
        //create the option list
        $.each( options, function() {
            txtStrng += "<option value=\"" + this.option_id.toString() + "\">";
            txtStrng += this.option_name.toString();
            txtStrng += "</option>";
        });
        //clear the option list
        $('#'+nextName).text('');
        //attach the option list
        $(txtStrng).appendTo('#'+nextName);
    }
</script>

A.
B
C
函数updateNext（el，nextName）{
var url_arg=el.value；
var full_url=“base_url/json_get_wstopics_by_category/”+url_arg；
var期权，txtStrng；
//抓取ajax数据
$.ajax({
async:false，
url:full_url，
键入：“POST”，
数据类型：“json”，
成功：函数（输出字符串）{
选项=输出字符串；
}
});
//创建选项列表
$.each（选项，函数（）{
txtStrng+=“”；
txtStrng+=this.option_name.toString（）；
txtStrng+=“”；
});
//清除选项列表
$（'#'+nextName）.text（''）；
//附加选项列表
$（txtStrng）.appendTo（“#”+nextName）；
}