$_GET 変数をリンクからブートストラップ モーダルに渡す方法は?

リンクからブートストラップ モーダルに $_GET 変数を渡す

ブートストラップ モーダルのコンテキストで、リンクから $_GET 変数を正常に渡すには、以下が必要です慎重なアプローチ。この記事では、このタスクを実行するためのさまざまな方法を紹介します。それぞれに独自の利点と考慮事項があります。

PHP ファイルを使用した簡単な解決策:

この解決策には、 HTML コード:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

モーダル HTML では、GET パラメーターを介して渡された ID に基づいてデータベースからレコードをフェッチし、モーダル内に表示します。

代替ソリューションAjax とブートストラップ モーダル イベント リスナーを使用:

このソリューションは、ブートストラップ モーダル イベント リスナーを使用して、別の PHP ファイルを使用せずに ID をモーダルに渡します。モーダル呼び出しボタンの HTML で、href 属性を data-id 属性に置き換えて、行の ID を渡します。

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

モーダルの JavaScript イベント ハンドラーで、ID を使用して Ajax 経由でデータをフェッチし、表示します。

Ajax と jQuery のクリック関数を使用した代替ソリューション:

このソリューションは、jQuery のクリック関数を利用して、Ajax 呼び出しを開始し、必要なデータを取得して表示します。モーダル呼び出しボタンの HTML で、アンカー タグを次のように変更します:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs open-modal" href="">

別の JavaScript ファイルで、データを取得して表示する次の Ajax コードを記述します:

$(document).ready(function() {
  $('.open-modal').click(function() {
    var id = $(this).attr('id');
    $.ajax({
      type: 'post',
      url: 'file.php', // PHP file to fetch data
      data: 'post_id=' + id,
      success: function(data) {
        $('#editBox').show('show'); // Show modal
        $('.form-data').html(data); // Display fetched data
      }
    });
  });
});

ページ上の情報をモーダルに渡す:

最小限のページ上の情報をモーダルに表示する必要がある場合は、Ajax を使用せずにこれを実現できます。モーダル呼び出しボタンの HTML では、データ属性を使用して値を渡します:

<td data-placement="top" data-toggle="tooltip" title="Show">
  <a data-book-id="<?php echo $obj->id; ?>" data-name="<?php echo $obj->name; ?>" data-email="<?php echo $obj->email; ?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
  </a>
</td>

関連するモーダル イベント ハンドラーでは、次のように渡された値にアクセスします:

$('#editBox').on('show.bs.modal', function(e) {
  var bookid = $(e.relatedTarget).data('book-id');
  var name = $(e.relatedTarget).data('name');
  var email = $(e.relatedTarget).data('email');
});

以上が$_GET 変数をリンクからブートストラップ モーダルに渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。