$_GET 변수를 링크에서 부트스트랩 모달로 전달하는 방법은 무엇입니까?-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

$_GET 변수를 링크에서 부트스트랩 모달로 전달하는 방법은 무엇입니까?

Nov 17, 2024 pm 10:48 PM

How to Pass $_GET Variables from a Link to a Bootstrap Modal?

링크에서 부트스트랩 모달로 $_GET 변수 전달

부트스트랩 모달의 맥락에서 링크에서 $_GET 변수를 성공적으로 전달하려면 다음이 필요합니다. 신중한 접근. 이 문서에서는 이 작업을 수행하기 위한 다양한 방법을 제시하며 각 방법에는 고유한 장점과 고려 사항이 있습니다.

PHP 파일을 사용한 간단한 솔루션:

이 솔루션에는 HTML 코드:

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

로그인 후 복사

모달 HTML에서 GET 매개변수를 통해 전달된 ID를 기반으로 데이터베이스에서 레코드를 가져와 모달 내에 표시합니다.

대체 해결 방법 Ajax 및 Bootstrap 모달 이벤트 리스너 사용:

이 솔루션은 Bootstrap 모달 이벤트 리스너를 사용하여 별도의 PHP 파일을 사용하지 않고 모달에 ID를 전달합니다. 모달 호출 버튼의 HTML에서 href 속성을 data-id 속성으로 대체하여 행의 ID를 전달합니다.

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

로그인 후 복사

모달의 JavaScript 이벤트 핸들러에서 ID를 사용하여 Ajax를 통해 데이터를 가져와 표시합니다.

Ajax 및 jQuery 클릭 기능을 사용한 대체 솔루션:

이 솔루션은 jQuery의 클릭 기능을 활용하여 Ajax 호출을 시작하여 필요한 데이터를 가져오고 표시합니다. 모달 호출 버튼의 HTML에서 다음과 같이 앵커 태그를 수정합니다.

&lt;td&gt;&lt;span data-placement=&quot;top&quot; data-toggle=&quot;tooltip&quot; title=&quot;Show&quot;&gt;&lt;a class=&quot;btn btn-primary btn-xs open-modal&quot; href=&quot;&quot;>

로그인 후 복사

별도의 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에서 데이터 속성을 사용하여 값을 전달합니다.

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

로그인 후 복사

관련 모달 이벤트 핸들러에서 다음과 같이 전달된 값에 액세스합니다.

$('#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.