通过AJAX/XML更改2个DIVS内容

Question

我正在为网站制作员工目录页面。该页面将有大约2二打的员工缩略图照片，当单击时，拇指下方的2个Divs将更改以显示较大的照片，以及员工的生物。我被告知要使用Ajax为此，因为我不希望该页面从一个员工到另一个员工更改/更改。该网站是使用C＃在.NET中构建的，到目前为止，我们尚未在此站点上使用jQuery或Mootools，因此我们可以使用任何一个。

。

所以这是我XML的片段：

<?xml version="1.0" encoding="utf-8"?>
<employees>
    <employee_01>
        <name>Employee J. Name</name>
        <title>Big Cheese</title>
        <email>[e-mail]</email>
        <phone>[phone]</phone>
        <bio><p>This is paragraph one of the bio. This could be several sentences long.</p>
<p>This is paragraph 2 for this bio. It may or may not be as long as the first one.</p></bio>
        <photo_url>employee_photo01.jpg</photo_url>
    </employee_01>
    <employee_02>
        <name></name>
        <title></title>
        <email></email>
        <phone></phone>
        <bio></bio>
        <photo_url></photo_url>
    </employee_02>
</employees>

这是需要用XML数据替换的DIV结构。

 <div id="employee_bio_container">
    <div id="employee_photo"><img src="images/employee_photo01.jpg" alt="Employee Name" /></div>
    <div id="employee_bio">
        <h1>Name</h1>
        <h5>title</h5>
        <h5><a href="mailto:email">email</a><br />
        phone goes here</h5>
        <hr />
<p>This is the bio that will be replaced</p>
    </div>
    </div>

因此，我需要在"员工_photo"div中更改图像的SRC，以及alt文本，并在" Employee_bio" Div中显示名称，标题，电子邮件地址，电话，电话和bio随着更改Mailto链接的URL。

我以前从未碰过Ajax，而且我很难理解到目前为止发现的教程。有什么提示或指示我指向我？

谢谢。

Answer 1

这很简单，请按照http://api.jquery.com/jquery..ajax/

中的示例。

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

1. 在您的AJAX成功中，处理数据对象。您的数据对象应包含员工信息和图像SRC
2. 在JavaScript中操纵您的html，将img.src设置为URL，然后构建员工employee_bio element的内容