PHP 도움말을 통한 jQuery/Ajax SQL 라이브 업데이트

Question

데이터베이스에서 while 루프를 통해 모든 연락처를 출력하는 테이블이 있습니다.

내 구문은 다음과 같다 :

SELECT * FROM contacts WHERE id = $_SESSION['user_id'] ORDER BY name ASC LIMIT 5 

은 내 모든 데이터를 가져옵니다 만 나에게 5 개 결과를 제공합니다.

이제 내 목표는 사용자가 숫자를 입력하도록 요청하는 양식을 사용하여 jquery (이 항목은 직접 관리 할 수 ​​있음)가있는 모델 상자를 여는 작은 버튼을 사용하여 해당 번호가 게시물을 통해 전송되거나 얻을 수 있습니다. $ PHP_SELF로 변경하고 사용자가 입력 한 숫자로 로컬 변수를 업데이트하면 해당 변수가 데이터베이스를 업데이트하여 LIMIT 값을 높이거나 낮추는 데 사용됩니다.

나는 웹을 통해 (구글과 함께) AJAX를 사용하여 양식을 제출할 것을 찾았지만 찾은 모든 예는 나를 위해 일하지 않는다.

사용자가 숫자를 제출하면 출력 된 테이블에 대해 SQL 쿼리가 실행되고 업데이트되어 사용자에게 페이지를 새로 고치지 않고 새 LIMIT 값에 따라 동적으로 업데이트합니다.

는

(document).ready(function(){ 
    $("form#form").submit(function() { 
    // we want to store the values from the form input box, then send via ajax below 
     var val = $('input[name=new_value]').attr('value'); 
     $.ajax({ 
      type: "post", 
      url: "process.php", 
      data: "val="+ val, 
      cache: false, 
      success: function(){ 
      $('form#form').hide(function(){$('.success').fadeIn();}); 
      } 
     }); 
     return false; 
    }); 
}); 

$(document).ready(function(){ $("form#form").submit(function() { 
    // we want to store the values from the form input box, then send via ajax below 
    var val = $('input[name=new_value]').attr('value'); 
    $.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success: 
    function(){ 
     $('form#form').hide(function(){$('.success').fadeIn();}); 
    } }); return false; }); }); 

다음 내 PHP 코드는 다음과 같습니다 :

내 jQuery 코드는

$new_val = $_POST['new_val']; 
$_val = "UPDATE `settings` SET `display_limit` = {$new_val} WHERE `user_id` = {$_SESSION['user_id']}"; 
mysql_query($_val) or die(mysql_error()); 

및 내 양식은 간단하다 :

어떤 제안? 필자는 출력 테이블을 동적으로 업데이트하는 방법을 찾지 못했습니다. 누군가가 올바른 방향으로 나를 가리키거나 도움이된다면 도움이됩니다.

감사

편집 :

여기

, 나는 성공적으로 양식을 제출할 수 내가 작업 한 업데이트 JQuery와 스크립트 해요입니다! 하지만 내 유일한 문제는 페이지가 패배는 AJAX 사용의 목적 ... 한숨 새로 고쳐집니다 때까지 변경 사항을 볼 수 있다는 것입니다

나는 지금 내 #results div의 업데이트와와 활력을 가질 수있는 방법 양식 제출 콘텐츠?

$(document).ready(function() { 
    var options = { 
     url: 'process.php', 
     type: 'post', 
     //dataType: 'json', 
     target: '#last_five_sellers', 
     success: success 
    }; 

    // bind to the form's submit event 
    $('#form').submit(function() { 
     // inside event callbacks 'this' is the DOM element so we first 
     // wrap it in a jQuery object and then invoke ajaxSubmit 
     $(this).ajaxSubmit(options); 
     // !!! Important !!! 
     // always return false to prevent standard browser submit and page navigation 
     return false; 
    }); 
    function success(responseText, $form) { 
     $("form#form").hide(); 
     $(".success").fadeIn(); 
    } 
}); 

Answer 1

업데이트를 수행하는 PHP 코드에서 연락처를 HTML 형식으로 표시 할 수 있습니다. 그런 다음 jquery에서 성공 함수로 돌아갑니다.

success: function(){ 
    $('form#form').hide(function(){$('.success').fadeIn();}); 
} 

이 함수에는 매개 변수 데이터가 있습니다.이 매개 변수 데이터는 PHP에서 반향 된 형식입니다. 예

success: function(data){ 
    $('form#form').hide(function(){$('.success').fadeIn();}); 
    $(data).appendTo('#result'); 
} 

Answer 2

요청의 흐름을 이해해야합니다. 일단 PHP 스크립트가 실행되면, 끝난 것입니다. 동일한 페이지로 다시 제출할 계획이라면 새로운 요청과 해당 스크립트의 새로운 실행이 될 것입니다. 이제는 jQuery 코드에 필요한 데이터를 반환하기 위해 해당 스크립트에 특별한 경우를 추가 할 수 있습니다.하지만 그것은 지저분한 IMO입니다. 차라리 해당 기능을 처리하는 별도의 스크립트가 필요합니다.이것은 웹 서비스로 간주 될 수 있습니다.

그래서 브라우저에서 해당 페이지로 이동하면 5 개의 연락처가 표시됩니다 (또는 LIMIT 절에 기본값이 표시되지 않음). 아이콘을 클릭하여 더 많은 연락처를 표시하면 jQuery를 사용하여 '웹 서비스'페이지에 GET 요청을 제출합니다 (새 데이터를 제출하지 않고 데이터를 검색하므로 실제로 GET해야합니다). 그러면 jQuery/JavaScript를 사용하여 페이지의 표시를 업데이트하는 데 사용하는 연락처 목록이됩니다.

Codler가 지적한대로 '웹 서비스'의 출력은 HTML을 사용하여 연락처를 표시하는 기존 HTML을 대체하기 만하면됩니다. 거의 항상 서버에서 가능한 한 많이 할 수 있습니다.

Answer 3

jQuery 코드가 중복 된 것처럼 보입니다. 양식의 submit 이벤트를 두 번 바인딩 할 필요가 없습니다. 또한 첫 번째 jQuery 블록에 달러 기호 ("$")가 없습니다. 그리고 내가 아는 한, .hide()은 첫 번째 매개 변수를 통해 콜백을 전달하는 것을 지원하지 않습니다. jQuery API 문서에서는 .hide(duration, [ callback ])으로 작성되었습니다.

내가 작성합니다

$(function(){ 
    $("form#form").submit(function(){ 
    // we want to store the values from the form input box, then send via ajax below 
     $.ajax({ 
      type: "post", 
      url: "process.php", 
      data: "val=" + $("input[name=new_value]").val(), 
      cache: false, 
      success: function(){ 
      $("form#form").hide(); 
      $('.success').fadeIn(); 
      } 
     }); 
     return false; 
    }); 
}); 

을 이제 동적으로 결과 테이블을 업데이트 할 경우, 가장 간단한 방법은 업데이트 된 HTML로 전체 일을 대체하기 위해 단지이다. 당신이 display_limit을 갱신 한 후에는 PHP 스크립트 (process.php) 그래서를 수정한다면 예를 들어, 그것은 새로운 결과 테이블을 출력, 당신은 다음과 같이 쓸 수있다 (결과 테이블을 가정하는 것은 table#results입니다) :

$(function(){ 
    $("form#form").submit(function(){ 
    // we want to store the values from the form input box, then send via ajax below 
     $.ajax({ 
      type: "post", 
      url: "process.php", 
      data: "val=" + $("input[name=new_value]").val(), 
      cache: false, 
      success: function(data){ 
      $("form#form").hide(); 
      $(".success").fadeIn(); 
      $("#results").replaceWith(data); 
      } 
     }); 
     return false; 
    }); 
}); 

스크립트가 HTML 만 출력하는지 확인해야합니다.

위의 답변과는 달리 HTML은 분명히 이러한 목적으로 작동하지만 이상적인 방법은 JSON 또는 XML 형식으로 데이터를 단독으로 (구조/프리젠 테이션 제외) 보내고 JavaScript를 사용하는 것입니다. HTML을 빌드하십시오. 이 방법으로 많은 대역폭을 절약 할 수 있으며 궁극적으로 응답 성이 뛰어난 응용 프로그램을 구축 할 수 있습니다.

편집은 여기에 미니 JSON 기반의 예입니다.

자바 스크립트 :

$(function(){ 
    $("#form").submit(function(){ 
     var val = $("input[name=new_value]").val(); 
     $.getJSON("process.php?val=" + val, function(data){ 
      $("#results").empty(); 
      $(data.rows).each(function(){ 
       $("#results").append('<tr><td>' + this.column_a + '</td><td>' + this.columbn_b + '</td></tr>'); 
      }); 
     }); 
     return false; 
    }); 
}); 

PHP (process.php는) :

이제

[assuming you already have a result/rows called $result] 
$json = array('rows' => array()); 
while ($row = mysql_fetch_assoc($result)) { 
    $json['rows'][] = $row; 
} 
echo json_encode($json); 

, 부여, 나는 모든이 코드를 테스트하지 않은,하지만 그것은 당신에게 그것의 요점을 주어야한다 .