실시간으로 sql 데이터베이스의 변경 내용을 html로 변경하십시오.

Question

죄송합니다. 주제가 막연한데 죄송합니다. 사용자가 폼을 채우고 프로파일 편집 버튼을 클릭하면 PHP를 통해 처리되고 편집이 성공하면 경고 (jquery를 통해)가 표시되는 프로파일 편집 기능이있는 웹 사이트를 만들고 있습니다. 사용자가 탐색 링크를 클릭 할 때 표시되는 숨겨진 div가 있습니다. 그러나 프로필보기 (홈)를 클릭하면보기 프로세스에서 페이지를로드하지 않았으므로 업데이트 된 SQL 정보는 표시되지만 이전 SQL 정보는 계속 표시됩니다. 페이지를로드하지 않고도 웹 사이트에서 정보를 업데이트하려면 어떻게해야합니까? 이 바보 같은 소리로 들리 겠지만

<div id="profile"> 
    <?php echo "Name: " . $array['firstname'] . " " . $array['surname'] . "<br>Contact Number: " . $array['contactNumber'];?> 
</div> 

Answer 1

HTML 내부

$("#editButton").click(function(){ 
    $.post("editprofile.php", 
    { 
     fname: $("#fnameBox").val(), 
     lname: $("#lnameBox").val(), 
     contact: $("#contactBox").val() 
    }, 
    function(data){ 
     console.log(data) 
    }); 
}); 

PHP,하지만 당신은 당신의 editprofile.php 스크립트를 신뢰하는 경우 (이 실패하지 않습니다 예) :

이

는 HTML/jQuery 코드입니다 #profile <div> 내용을 해당 스크립트 호출과 함께 업데이트하지 않으시겠습니까?

$("#editButton").click(function(){ 
    $.post("editprofile.php", 
    { 
     fname: $("#fnameBox").val(), 
     lname: $("#lnameBox").val(), 
     contact: $("#contactBox").val() 
    }, 
    function(data){ 
     console.log(data) 
    }); 
    $("#profile").html(
     "Name: " + 
     $("#fnameBox").val() + 
     " " + 
     $("#lnameBox").val() + 
     "<br>Contact Number: " + 
     $("#contactBox").val() 
    ); 
}); 

이렇게하면 사용자가 페이지를 새로 고침 할 때와 동일한 경험을 할 수 있습니다. editprofile.php가 실패한 경우 아무런 해가 없습니다.

Answer 2

$.ajax의 약자 인 $.post을 사용하면 function(data)은 아약스가 성공했을 때 발생합니다.

console.log(data) 대신 #profile div를 업데이트하는 코드가있을 수 있습니다. 이상적인 방법은 editprofile.php이 fname lname을 반환하고 ajax 호출 (데이터)에 json 문자열로 위생 처리 된 연락처 (아래 예제가 있음)를 사용하고 #profile div를 채우는 데 사용하는 것입니다.

editprofile.php :

<?php 
    //Make sure this is the onlything echoed in the php file. 
    //Sanitize your $_POST first im not doing it here but you should be careful with that; 
    echo json_encode($_POST); 
?> 

자바 스크립트 : 데이터베이스 논리 후에는 JSON 문자열 반환 할 수 있도록 개별적으로 필드의 .val()을 얻는 대신 그런데

$("#editButton").click(function(){ 
    $.post("editprofile.php", 
    { 
     fname: $("#fnameBox").val(), 
     lname: $("#lnameBox").val(), 
     contact: $("#contactBox").val() 
    }, 
    function(data){ 
     try{ 
      jdata = JSON.parse(data); 
      $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact); 
     } catch(e){ 
      //code to manage the error 
      //If you are 100% sure the editprofile will work and don't want to catch the errors 
      //Just use the code inside the try{} and forget the try...catch 
     } 
    }); 
}); 

당신 양식을 타겟팅하는 .serialize()을 사용할 수 있습니다.

//This would do the same as the code above without trying to catch the error: 
$.post("editprofile.php", $('#myForm').serialize(), function(data){ 
    jdata = JSON.parse(data); 
    $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact); 
});