0

Web サイトの従業員名簿ページを作成しています。このページには、約 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 とその代替テキストを変更し、「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 に答える