$_GET 변수를 링크에서 Bootstrap 모달로 어떻게 전달할 수 있나요?

Linda Hamilton
풀어 주다: 2024-11-13 08:40:02
원래의
990명이 탐색했습니다.

How can I pass $_GET variables from a link to a Bootstrap modal?

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

웹 개발에서는 링크에서 모달 창으로 데이터를 전달해야 하는 경우가 많습니다. Bootstrap에서 $_GET 변수를 사용하여 이를 달성하려면 다음 단계를 따르십시오.

간단한 솔루션

  1. 모달 호출 버튼:

    <td>
    로그인 후 복사
    로그인 후 복사
  2. 모달 HTML:
    통화 버튼이 있는 페이지(가급적 하단)의 while 루프 외부에 다음 모달 HTML을 배치합니다.

    <div class="modal fade">
    로그인 후 복사
    로그인 후 복사
  3. file.php:

    <?php
    // Include database connection here
    
    $Id = $_GET["id"]; // Escape the string if you like
    
    // Run the query
    ?>
    
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title"><center>Heading</center></h4>
    </div>
    
    <div class="modal-body">
      // Show records fetched from database against $Id
    </div>
    
    <div class="modal-footer">
      <button type="button" class="btn btn-default">Submit</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    로그인 후 복사

Ajax를 사용한 대체 솔루션

  1. 모달 호출 버튼(데이터 속성 포함):

    <td>
    로그인 후 복사
    로그인 후 복사
  2. 모달 HTML:

    <div class="modal fade">
    로그인 후 복사
    로그인 후 복사
  3. JavaScript(jQuery 포함):

    // jQuery library comes first
    // Bootstrap library
    $(document).ready(function() {
      $('#editBox').on('show.bs.modal', function(e) {
        var id = $(e.relatedTarget).data('id'); // Fetch id from modal trigger button
    
        $.ajax({
          type: 'post',
          url: 'file.php', // Here you will fetch records
          data: 'post_id=' + id, // Pass $id
          success: function(data) {
            $('.form-data').html(data); // Show fetched data from database
          }
        });
      });
    });
    로그인 후 복사
  4. file.php:

    <?php
    // Include database connection here
    
    if ($_POST['id']) {
      $id = $_POST['id'];
    
      // Run the query
      // Fetch records
      // Echo the data you want to show in the modal
    }
    ?>
    로그인 후 복사

추가 참고 사항

  • 모달에서 데이터를 지우는 별도의 스크립트가 필요하지 않도록 하려면 $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal'); });
  • 또 다른 옵션은 $('.open-modal')과 함께 jQuery의 클릭 기능을 사용하는 것입니다. .click(function(){ ... });, 여기서 open-modal은 모달 호출 버튼에 추가된 사용자 정의 클래스입니다.
  • 또한 데이터 속성과 데이터 속성을 사용하여 페이지 정보를 모달에 전달할 수도 있습니다. 부트스트랩 모달 이벤트를 사용하여 처리하세요.

이러한 기술을 사용하면 $_GET 변수를 링크에서 부트스트랩 모달로 효과적으로 전달할 수 있으므로 웹 애플리케이션에 동적 콘텐츠를 표시할 수 있습니다.

위 내용은 $_GET 변수를 링크에서 Bootstrap 모달로 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿