jquery Ajax 및 PHP를 사용하여 단일 div 새로 고침

Question

좋아요. 입력에 표시 옵션 그룹에 대한 코드가있는 div가 페이지에 있습니다. 그런 다음 선택이 이루어진 후 해당 그룹의 옵션을 표시하는 반대쪽에서 이에 대한 나의 HTML/PHP 코드는 다음과 같습니다 : 사용자가 선택하고자하는 그룹 선택 후이 설정되어 있기 때문에 원래의 페이지로드에 기본적으로

<div class="row"> 
    <div class="col-lg-6"> 
     <label class="control-label" for="productOptions">Select your 
     product options</label> <select class="form-control" id= 
     "productOptions"> 
      <option> 
       Select an Option Group 
      </option><?php foreach($DefaultOptions as $option): ?> 

      <option value="<?php echo $option['GroupID']; ?>"> 
       <?php echo $option['GroupName']; ?> 
      </option><?php endforeach; ?> 
     </select> 
    </div> 

    <div class="col-lg-6" id="groupOptions"> 
     <label class="control-label">Group Options</label> 
     <?php if($GroupOptions): ?> 
     <?php foreach ($GroupOptions as $optionValue): ?> 
     <?php echo $optionValue['optionName']; ?> <?php endforeach; ?> 
     <?php endif; ?> 
    </div> 
</div> 

는 $GroupOptions는 형태로 존재하지 않습니다. 나는 아약스는 데이터베이스의 그룹 ID와 일치 옵션을 얻는 PHP 호출에 간다 다음

$("#productOptions").change(function(){ 

    var GroupID = $(this).val(); 
    var dataString = 'GroupID=' + GroupID; 
    //alert (dataString);return false; 
    $.ajax({ 
     type: "POST", 
     url: "#", 
     data: dataString, 
     success: function() { 
     $("#groupOptions").html(dataString); 
     } 
    }); 
    return false; 
}); 

avoid page reload Ajax를 사용하여 PHP 스크립트를 호출합니다.

if(isset($_POST['GroupID'])) 
{ 
    $GroupID = $_POST['GroupID']; 
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID"; 

    $GroupOptions = $db->query($sql); 
} 

는 지금은 위의 쿼리의 결과를 표시 사업부 #GroupOptions을 refresh, true로 <?php if($GroupOptions): ?> 세트를 만들고 싶어.

나는 ajax 호출의 성공 함수에서 $("#groupOptions").html(dataString);으로 div를 새로 고칠 수 있었다. 그러나 그것은 단지 dataString 만 반환합니다. (명백하게). 진정으로 div를 새로 고치는 방법이 있습니까? 아니면 성공 함수로 PHP 호출에서 정보를 전달하는 방법?

Answer 1

UPDATE :

당신은 당신의 현재 코드에서 4 문제가 :

문제 # 1 문제 # 2 - 별도의 PHP 스크립트에서 다시 아약스에 어떤 반향되지 않습니다. 반향하는 내용은 변수로 success 함수로 돌아갑니다. 원하는 형식에 따라 echo 문을 추가하기 만하면됩니다. 두 번째 문제는 $GroupOptions이 존재하지 않는 HTML 부분에 에코를 표시하려고한다는 것입니다. Ajax는 PHP 스크립트의 결과를 단순히 반환하지만 include 문은 아니기 때문에 변수가 동일한 범위에 있지 않습니다. 당신의 아약스에서

if(isset($_POST['GroupID'])) 
{ 
    $GroupID = $_POST['GroupID']; 
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID"; 

    $GroupOptions = $db->query($sql); 

    //this is where you want to iterate through the result and echo it (will be sent as it to the success function as a variable) 
    if($GroupOptions): 
     foreach ($GroupOptions as $optionValue): 
     echo $optionValue['optionName']; 
     endforeach; 
    endif; 
} 

는 PHP 스크립트의 출력을 수신 할 성공 함수에 data라는 이름의 변수를 추가합니다. .

$.ajax({ 
     type: "POST", 
     url: "your_external_script.php", 
     data: dataString, 
     success: function(data) { 
     if (data && data !== '') { 
     //data will equal anything that you echo in the PHP script 
     //we're adding the label to the html so you don't override it with the new output 
     var output = '<label class="control-label">Group Options</label>'; 
     output += data; 
     $("#groupOptions").html(output); 
     } else {//nothing came back from the PHP script 
     alert('no data received!'); 
     } 
     } 
    }); 

문제 # 4 - 그리고 당신의 HTML에, 필요는 PHP를 실행할 수 없습니다 : 또한 URL이 잘못 것을 알, 당신은 같은 my_custom_script.php 실제 외부 파일에 게시해야합니다. 단순히 변경 :

<div class="col-lg-6" id="groupOptions"> 
     <label class="control-label">Group Options</label> 
     <?php if($GroupOptions): ?> 
     <?php foreach ($GroupOptions as $optionValue): ?> 
     <?php echo $optionValue['optionName']; ?> <?php endforeach; ?> 
     <?php endif; ?> 
    </div> 

이

Answer 2

도움이되기를 바랍니다

<div class="col-lg-6" id="groupOptions"> 

</div> 

에 당신은이 행해져 Yout 성공 콜백 함수에서 응답을 받아 실제로 거봉 기능

$에서 응답을주고있다 ("#product 옵션").변화 (함수() {

var GroupID = $(this).val(); 
    var dataString = 'GroupID=' + GroupID; 
    //alert (dataString);return false; 
    $.ajax({ 
     type: "POST", 
     url: "#", 
     data: dataString, 
     success: function(dataString) {  //take the response here 
     // convert dataString to html... 
     $("#groupOptions").html(newHtml); 
     } 
    }); 
    return false; 
}); 

PHP :이 인사는해야 좋아 world`,하지만 그것은 하나 DIV 내부의 전체 페이지를 다시로드 것`에서 반향되는

if(isset($_POST['GroupID'])) 
{ 
    $GroupID = $_POST['GroupID']; 
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID"; 

    $GroupOptions = $db->query($sql); 
    echo json_encode($GroupOptions);   //give a response here using json 
}