Question

我正在使用php，并希望有一个下拉列表的页面。下拉列表中的元素有一些与之关联的id。在下拉列表下方有一个文本框，文本框下方有一些图像。如下所示

<drop down box>
______________
<textbox _content_ loaded via ajax onchange of drop down box>
<some images loaded via ajax onchange of drop down box>

我想在每次更改下拉菜单时查询数据库，并使用来自数据库的信息填充文本框并加载从数据库中提取的图像。

是否有一些可用于此的ajax库？我假设会有一个php页面来执行查询并将结果发送回主页？

你能告诉我一些我应该看的例子/教程吗？

Answer 1

简短回答：jQuery。这是一个如何在jQuery中处理下拉控件的例子

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Answer 2

你可能也想在同一件事上看YUI的版本。您可以创建的丰富自动填充功能也非常酷。 http://developer.yahoo.com/yui/autocomplete/

Answer 3

如果需要检索更复杂的数据，则必须检索json数据而不是普通的html。对于您不需要ajax的图像，只需创建一个图像标记，即可检索图像。你不能使用ajax传输文件。

Answer 4

您可以使用原型库。

假设您有一个页面输出文本框的HTML内容和输出图像的页面，您可以执行以下操作：

<script type="text/javascript" src="javascript/prototype.js">
<script type="text/javascript">
function select_changed() {
    // get the selected value
    var parms = 'selection='+$F('selectbox');
    // request the textbox value and pop it into the textbox
    new Ajax.Updater(
        'textbox',
        'http://example.com/textbox_handler.php',
        {
            method: 'post',
            parameters: parms
        });

    // request the image(s) and pop them into the image container div
    new Ajax.Updater(
        'image_container',
        'http://example.com/images_handler.php',
        {
            method: 'post',
            parameters: parms
        });
}

</script>

<select id="select" onChange="javascript:select_changed();">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
</select>

<textarea name="textbox"></textarea>

<div id="image_container"></div>

Answer 5

最简单的方法是使用Jquery。例如，你可以做这样的事情。

$('#dropdown').change(function(){ //listen for the change event of #dropdown box
    $.get('example.com/script.php', 
        {$('#dropdown').val()}, //send the value of dropdown as GET parameter 'val'
        function(data){
        $('#content').html(data.content);
        //first clear the image area:
        $('#imgs').empty();
        //Insert all the images
        for(x in data.imgs){
            $('#imgs').append('<img src="'+data.imgs[x]+'">');
        }
    }, 'json');
});

假设您的HTML看起来像这样：

<select id='dropdown'>
    <option value='1'>Option1</option>
    <option value='2'>Option2 etc.</option>
</select>

<div id='content'>I contain the content, I might as well be a textarea or something else, as long is my id='content'</div>
<div id='imgs'><img src='iContainImgs.jpg'></div>

然后在服务器端创建一个具有以下结构的Json对象：

content: "all the content",
imgs: array('img1.jpg', 'img2.jpg', 'etc')

如何实现以下ajax

5 个答案: