-1

ページに 3 つのクリック可能なメニュー項目があります。

  • オプション1
  • オプション2
  • オプション3

サーバーには3つのphpファイルもあります。

  • option1.php
  • option2.php
  • option3.php

簡単にするために、option1.php が数字の 1 をエコーし​​、option2.php が数字の 2 をエコーするとします。

ページの更新を避けるために AJAX を使用したいので、ユーザーが option1 をクリックすると、option1.php ファイルに 1 が表示されます。

これを行う良い方法は何ですか？

編集：質問をもう一度見直して、解決策を考え出しました。メニュー項目を含む php ファイルに、更新エリア div を追加しました。

<div id="update_area">
</div>

外部 JavaScript ファイルには、AJAX php ファイルによって処理されるメニュー項目番号を送信する関数を呼び出す onclick イベントが含まれています。これは私のテストです

$_GET[sent_data]

(たとえば) 1 の場合、次を使用します。

require "option1.php";

機能が動作するようになったので、option?.php ファイルを個別に編集できます。

私は SomeKittens の回答を最も役に立ったものとして投票しました。

4

4 に答える 4

2

AJAX データを PHP に送り返す JavaScript コードのある時点で、データの送信先の PHP ファイルを指定する必要があります。バニラ JS では、これがそのajaxRequest.open部分です。AJAX 関数に文字列パラメーター (たとえばphpfile) を指定させ、次のスニペットを使用して AJAX 関数で php ファイルを選択します。

ajaxRequest.open("GET", phpfile, true);

フォーム要素には attrib がありonclickます:

onClick="myAJAX('option1.php')"

などなど

http://www.tizag.com/ajaxTutorial/

于 2012-10-31T13:56:34.597 に答える
1

これは、データを取得し、AJAX を使用してページに表示するための Javascript と HTML の出発点です。

Javascript (jQuery を含めた後)

function getDataForOption(num) {
    $.ajax(function() {
        url: "option" + num + ".php",
        success: function(data) {
            $('#results').html(data);
        }
    });

    return false;
}

HTML

<div id="results"></div>
<a href="#" onclick="getDataForOption(1);">Option 1</a>
<a href="#" onclick="getDataForOption(2);">Option 2</a>
<a href="#" onclick="getDataForOption(3);">Option 3</a>
于 2012-10-31T13:59:22.910 に答える
0

あなたが言ったように、AJAXを使用する必要があります。誰かが option1 をクリックすると、オプションの値が関数に渡されます。この値は、リクエストが送信されるページを決定します。AJAX を介してリクエストを送信し、onSuccess で出力を表示します。

于 2012-10-31T13:55:34.067 に答える
0 
$('.link').on('click', function() {
  $.get($(this).attr('href'), function(r) { $('#container').html(r) });
});
于 2012-10-31T13:54:42.537 に答える