如何实现以下ajax答案

【问题标题】：how to achieve the following ajax如何实现以下ajax
【发布时间】：2009-09-06 15:47:48
【问题描述】：

我正在使用 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 页面来执行查询并将结果发送回主页？

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

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

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

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

【讨论】：

谢谢。我担心的一个问题是，如果我想从服务器取回多个东西怎么办。就像在示例中一样，他们总是返回一件事。但我会拿回两件事。和图像列表。我需要另一个服务器端脚本吗？
您可以在单个响应中返回多个项目。看看 JSON 字符串结构 {key1:value, key2:value, ...} 这样你就可以用你想要返回的数据构建 json 并在客户端解析它。

【解决方案2】：

最简单的方法是使用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')

【讨论】：

【解决方案3】：

您可能还想查看 YUI 的版本。您可以在那里创建的丰富的自动完成功能也很酷。 http://developer.yahoo.com/yui/autocomplete/

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您可以这样做的一种方法是使用原型库。

假设您有一个输出文本框的 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>

【讨论】：