Php 如何实现以下ajax

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

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

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

---

你可能还想看看YUI在同一件事情上的版本。您可以在那里创建的丰富的自动完成功能也非常酷。

---

如果需要检索更复杂的数据，则必须检索json数据，而不是纯html。

---

对于不需要ajax的图像，只需创建一个图像标记，即可检索图像。不能使用ajax传输文件。

一种方法是使用prototype库

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

函数选择_已更改（）{
//获取所选的值
var parms='selection='+$F（'selectbox'）；
//请求textbox值并将其弹出到textbox中
新的Ajax.Updater(
“文本框”，
'http://example.com/textbox_handler.php',
{
方法：“post”，
参数：parms
});
//请求图像并将其弹出到图像容器div中
新的Ajax.Updater(
“图像容器”，
'http://example.com/images_handler.php',
{
方法：“post”，
参数：parms
});
}
第一值
第二值

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

$('#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');
});

---

谢谢我关心的一个问题是，如果我想从服务器上取回多个东西，该怎么办。就像在这个例子中，每次他们总是返回一个东西。但我会得到两样东西。和图像列表。我需要另一个服务器端脚本吗？您可以在一个响应中返回多个项目。看看JSON字符串结构{key1:value，key2:value，…}，这样您就可以用想要返回的数据构建JSON，并在客户端对其进行解析。

<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>

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