Question

我正在为网站制作员工目录页面。该页面将有大约24张员工的缩略图照片，点击后，拇指下面的2个div将更改为显示更大的照片和员工的生物。我被告知要考虑使用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>email@email.com</email>
        <phone>(555) 333-4444</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>

所以我需要更改“employee_photo”div中图像的src及其替换文本，并在“employee_bio”div中显示名称，标题，电子邮件地址，电话和生物更改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.');
  }
});

在您的ajax成功中，处理数据对象。您的数据对象应包含员工信息和图像src
在javascript中操作你的html，将img.src设置为url，然后构建employee_bio元素的内容

通过Ajax / XML更改2 Divs内容

1 个答案: