0

我有一个用 Python 编写的 cgi 脚本。有两个下拉菜单,然后是一个提交按钮。我希望能够从第一个菜单中进行选择,并根据该选择,让第二个下拉菜单动态填充新选择。第二个菜单应该无需单击任何按钮即可填充,而只需从第一个菜单中进行选择即可。每次我在第一个菜单上选择一个新项目时,第二个菜单也应该不断重新填充 - 再次,无需单击提交。

完成这项工作的总体思路是什么?我已经实现了一些代码。它根据是否提供输入的条件使用 if/else 语句。因此,在第一次选择下拉菜单后,页面提交,if/else 语句指向显示相同表单但选择保留在下拉菜单中的代码。我正在使用 onchange='this.form.submit() 提交表单,而无需使用提交按钮。当前的问题是,在第一次进行选择时会自动提交表单,但在此表单上重新选择似乎不起作用。所以,我不确定 onchange='this.form.submit() 是否在第一次之后提交表单。

这是一个原型。我是否朝着正确的方向前进?还是我应该使用 Ajax?(对此完全不熟悉):

firstChoicesList = firstChoices()
print(""" <form method="post" action="/cgi-bin/thisScript.py">""")

# if both choices are not selected yet
if "firstChoice" not in form and "secondChoice" not in form:
    # first choice drop down menu
    print("""<p>first choice <select name="firstChoice">""")
    for f in fristChoicesList:
        print("""<option value='""" + f + """'>""" + f + """</option>""")

    # second choice drop down menu
    print("""</select></p>""")
    print("""<p>second choice <select name="secondChoice">""")
    for f in secondChoicesList: # currently contains 1 empty string 
        print("""<option value='""" + f + """'>""" + f + """</option>""")
    print("""</select></p>""")
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1) # don't proceed with rest of code below these if/else statements

# if first choice has been selected but not the second
elif "firstChoice" in form and "secondChoice" not in form: 
    # <code for first drop down menu again with choice selected>
    # this function takes the first choice as an argument and returns selections for the second menu
    secondChoicesList = secondChoices(form["firstChoice"].value) 
    # <code for second drop down menu with choices populated from secondChoicesList>
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1)

# if both are selected 
else:
    # <same code as above except have both drop down menus save previous selections>
    # proceed to run rest of cgi script 
4

1 回答 1

0

这是一个提示:您可以使用对服务器端页面的 ajax 调用填充下一个菜单(这将给您返回数据):这将让您:
- 避免通过页面发送表单和传递值(您将发送仅在最后形成)
- 让用户更改他的选择(如果他需要),而无需浏览历史记录

我认为将 ajax 与 jquery 一起使用将非常简单,即使您不知道它也是如此。

请检查简短的 ajax jquery fiddle example以了解使用 jquery 有多么容易(这里,对于跨域请求,这不应该是您的情况,您必须禁用浏览器的网络安全,例如对于 google chorme将 google chrome 设置为使用ajax进行跨域请求

小提琴的代码:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<select name="a" id="a" onchange="func(this.value)">
<option value="">choose</option>
<option value="https://www.google.it/search?q=ajax+and+juery&oq=ajax+and+juery&aqs=chrome.0.57j0l3.7474j0&sourceid=chrome&ie=UTF-8#sclient=psy-ab&q=ajax+jquery&oq=ajax+jquery&gs_l=serp.3..0l10.2179.3578.2.3820.7.3.1.3.3.1.206.516.0j2j1.3.0...0.0.0..1c.1.15.serp.9gdUZUmAxcI&psj=1&bav=on.2,or.r_qf.&bvm=bv.47244034,d.ZGU&fp=41333c9f97f3f20a&biw=800&bih=505">google</option>
<option value="http://it.bing.com/search?q=ajax+jquery&go=&qs=n&form=QBLH&filt=all&pq=ajax+jquery&sc=0-0&sp=-1&sk=">bing</option>
</select>
</body>
<script>
function func(ak){
$.ajax({
    url : ak,
    success : function (data,state) {
        $("body").html(data);
        alert(state);
    },
    error : function (request,state,error) {
        alert("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    console.log("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    }
});
}
</script>
于 2013-05-30T22:16:47.357 回答