0

我正在为网站制作员工目录页面。该页面将有大约 2 打员工的缩略图，单击时，拇指下方的 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 及其 alt 文本，并在“employee_bio”div 中显示名称、标题、电子邮件地址、电话和简历，同时更改mailto 链接的 URL。

我以前从未接触过 AJAX，而且我很难理解迄今为止找到的教程。有什么提示或方向可以指点我吗？

谢谢。

4

1 回答 1

0

很简单，按照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 元素的内容
于 2012-11-06T22:04:37.730 回答