Jquery img src 변수를 PHP 변수로 변경 하시겠습니까?

jquery 변수를 PHP 변수로 가져 오는 방법, jss가 포함 된 PHP 문서를 만든 다음 CSS가 바뀔 이미지를 클릭하면 더 큰 이미지가 표시됩니다. 데이터베이스에서 이미지에 대한 정보를 얻으려면 PHP 변수에 큰 이미지의 이미지 소스가 있어야합니다. PHP 파일에서Jquery img src 변수를 PHP 변수로 변경 하시겠습니까?

코드 : JS 파일에

<div id="box-content"> 
    <?php 
     $con=mysqli_connect("localhost","root","root","database"); 
     // Check connection 
     if (mysqli_connect_errno()) { 
      echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
     } 

     $result = mysqli_query($con,"SELECT * FROM image"); 
     while($row = mysqli_fetch_array($result)) { 
      echo "<img src='". $row['url'] ."' class='media-image' />"; 
     } 
     mysqli_close($con); 
    ?> 
</div> 
<div id="image-info"> 
    <div id="image"> 
      <img src="" id="bigimage"/> 
    </div>

코드 :

$(function() { 
    "use strict"; 
    $('.media-image').click(function() { 
     $(this).toggleClass('media-image-selected'); 
    }); 
    $('.media-image').click(function() { 
     var src = $(this).attr('src'); 
     $('#bigimage').attr('src', src); 
    }); 
});

출처

2014-10-21 Stefan van de Wiel

문제는 데이터베이스에서 이미지 객체의 정보를 즉석에서 표시하려는 것입니다. 페이지를 빌드 할 때, 당신은 이미지에 대한 데이터베이스에서 모든 가능한 정보를 조회 할 수 있습니다

첫 번째 옵션

서버 측 코드에서 : 내가 생각하는 경우

은 두 가지 옵션이 있습니다. 이 메타 데이터는 data HTML attributes에 저장해야합니다. Java 스크립트의 클라이언트 측 코드에서이 메타 데이터 값을 읽고 표시 할 수 있습니다. 데이터 속성을 읽으려면 .data()를 사용할 수 있습니다. jQuery 함수 큰 쿼리로 인해 페이지로드 시간이 늘어나지 만 클라이언트가 정보를로드하기 위해 더 기다릴 필요가 없습니다. 왜냐하면 모든 데이터가 고객 입장에서.

두 번째 옵션

당신이 할 수있는 AJAX 로딩하여 해당. 레이아웃을 작성하는 PHP 스크립트가 필요합니다. 이미지의 ID를 입력해야합니다. 예 : 데이터베이스의 ID는 중요하지 않습니다.이 값으로 이미지를 검색합니다. 이러한 ID를 넣으려면 이전에 언급 한 데이터 특성을 사용하는 것이 좋습니다. 그런 다음 데이터베이스에서 선택 작업을 수행 할 PHP 인터페이스가 필요합니다. 이 스크립트는 GET 매개 변수에서 이미지 ID를 읽고 그 이미지에 대한 정보를 선택해야합니다.데이터를 PHP 배열에 넣은 다음 PHP 배열을 JSON 배열로 변환하고 씁니다. 중요 :이 스크립트는 JSON 배열을 제외한 모든 것을 작성해서는 안됩니다.

header('Content-type: application/json');

마지막으로 당신이 클릭 된 이미지에서 ID를로드 할 레이아웃에 클라이언트 측 스크립트를 작성해야하고에 AJAX로드를 호출이 인터페이스 스크립트에서이 코드를 사용하여 JSON 데이터 형식으로 헤더를 변경해야 인터페이스 PHP.

레이아웃 빌더 (서버 측)
데이터베이스를 선택 인터페이스 (서버 측)

http://api.jquery.com/jquery.ajax/

: AJAX 호출을 위해 나는 일의 jQuery AJAX 기능을 제안

ajax 호출자 (클라이언트 측)

두 개의 서버 측 스크립트는 확실히 두 개의 파일로 분리되어야합니다.

이 방법은 처음에는 더 복잡하지만 때로는 더 효율적입니다.

요약

첫 번째 방법은 아마도 때문에 선택 데이터베이스에, 조금 더 페이지 로딩 시간이있을 것이다. 그러나 좋은 sql 코드를 잘 최적화 할 수 있으므로 쿼리 시간은 밀리 초 단위로 측정 할 수 있습니다. 간단한 유스 케이스에서는 이것이 최선의 방법이다.

두 번째 것은 더 복잡한 데이터를로드하거나 수정하려는 경우에 사용해야합니다.

첫 번째 옵션을 권합니다.

행운을 빈다.

출처

2014-10-21 11:06:36 xrissz

아약스로 만들었고 이제 작동합니다! 많은 감사합니다. –

당신을 환영합니다! – xrissz

당신은

같은 data-* 속성으로 큰 이미지 URL을 설정할 수 있습니다 ,210

echo "<img src='". $row['url'] ."' data-big='". $row['bigimage'] ."' class='media-image' />";

$('.media-image').click(function() { 
    var src = $(this).data('big'); 
    $('#bigimage').attr('src', src); 
});

출처

2014-10-21 10:03:10

그것은 내가 의미하는 바가 아니며 이미 올바른 src를 가지고 있으며 작은 이미지 중 하나를 클릭 한 후에도 큰 이미지를 보여줍니다. 하지만 PHP 변수에서 큰 하나의 src가 필요합니다. –

PHP 스크립트를 사용하면 이미지 클릭 이벤트를 수행합니다 클라이언트 측 (브라우저)에

다음 이미지와 자바 스크립트 물건과 함께 당신의 HTML을 생성하는 서버 측에서 실행 (이미지가 더 큰 만들기)

하지만 "SRC는"다른 서버 요청 (서버 측 PHP 파일 요청을)

을해야 사용하여 데이터베이스에서 이미지 정보를 가져 오기 위해3210

기존 페이지를 새로 고치거나 Ajax 호출을 통해

Ajax 호출을 사용하는 것이 좋으며 JavaScript에서 "src"값을 가져올 수 있습니다. PHP 파일에 매개 변수로 전달하고 반환 할 PHP 파일을 만듭니다. "src"매개 변수를 사용하여 데이터베이스의 이미지 정보

출처

2014-10-21 10:29:08

Jquery img src 변수를 PHP 변수로 변경 하시겠습니까?

답변

관련 문제