2013-03-05 2 views
0

의견 양식의 데이터를 MySQL 데이터베이스에 저장하고 새로 고침 할 필요없이 해당 주석으로 페이지를 업데이트하려고합니다. Facebook 댓글이 작동하는 것과 유사합니다.MySQL에 데이터를 저장하고 새로 고치지 않고 해당 데이터로 페이지를 업데이트하십시오.

나는 이곳에 대한 해답을 찾았지만, 내 필요에 맞는 것을 찾지 못했습니다.

var ajaxSubmit = function(formEl) { 
    // fetch where we want to submit the form to 
    var url = $(formEl).attr('action'); 

    // fetch the data for the form 
    var data = $(formEl).serializeArray(); 

    // setup the ajax request 
    $.ajax({ 
     url: url, 
     data: data, 
     dataType: 'json', 
     success: function(data) { 
      if(rsp.success) { 
       alert("Comment Successfully Added!"); 
     } 
    }); 
    return false; 
} 

내가 경고를 호출하고 있기 때문에 페이지가 현재이 스크립트 업데이트되지 않습니다 알고

다음은 PHP 스크립트로 양식 데이터를 제출하는 AJAX이다. 그러나 데이터를 제출할 때 insertComment() 함수를 호출하고 데이터베이스에 주석을 삽입하는 페이지 인 /ajax/comment.process.php 페이지로 가져옵니다. 나는 지금 success() 기능에 alert() 기능을 가지고 있으며 나는 그것을 얻지도 못하고있다.

내가 원하는 것은 의견을 제출할 때 사용자가 현재 페이지를 떠나지 않고 방금 제출 한 내용으로 업데이트된다는 것입니다. 그게 사실 반환하는 경우 여기

이 스크립트는 데이터베이스에 코멘트를 저장하는 insertComment() 함수를 호출 /ajax/comment.process.php'

session_start(); 

include_once('../classes/comment.class.php'); 
include_once('../classes/db.class.php'); 

$user_id = $_SESSION['user_id']; 

$db = new DBConnection; 
$comments = new Comment($db); 

$blog_id = intval($_POST['blogID']); 

$addCom = $comments->addComment($user_id); 

if($addCom === FALSE) { 
    $resp = "<span class='error'>Error adding comment</span>"; 
} else { 

    $resp = $comments->getComments($blog_id); 
} 

return $resp; 

의 코드이며, 다음, 그 특정 게시물에 대한 코멘트를 검색하는 getComments() 함수를 호출 어레이에 저장합니다.

의견 대답이 데이터베이스에 저장되었지만 비어있는 ajax/comment.process.php 페이지로 리디렉션됩니다. 페이지를 새로 고치지 않고도 게시 한 메모로 현재 페이지를 업데이트하려면 어떻게합니까? 나는 $resp 변수를 반환한다고 생각했지만, 그렇다면 분명히 그럴 수는 없지만, 표시 할 루프를 foreach() 할 수는 있습니다.

편집 : 아래의 답변에 모든 것을 구현했으며 아직이 문제를 해결하지 않았습니다.preventDefault();, return false;return ajaxSubmit(this);

+0

경고 주위에서 rsp.success를 제거하면 어떻게됩니까? – Oli

+0

'ajaxSubmit'을 어떻게 부르십니까? – Musa

+0

경고 주위에서'rsp.success'를 제거해도 아무런 차이가 없습니다. 'onsubmit = "ajaxSubmit (this);"'을 '

'요소 –

답변

1

당신이 dataType: 'json',을 삭제하고 if(rsp.success) {을 삭제하고 간단한 경고를 만들 수 아약스에서 : 내가 제출되는 양식을 방지해야이 세 가지가 경우에도 양식은 STILL /ajax/comment.process.php에 제출되고있다 대신 사용중인 반환의 PHP에서

$.ajax({ 
     url: url, 
     data: data, 
     success: function(data) { 
       alert("Comment Successfully Added!"); 
       alert(data); 
     } 
}); 

는 에러가 발생했을 경우 적어도 당신이 볼 에코

echo $resp; 

를 사용 이 alert(data.keyofthearray)

1

같은 경고 수는 PHP

echo json_encode($resp);//as soon as $resp is an array 

에서와 아약스의 JSON 코드

를 사용하여 시작할 수

후에는 인 (제출에서 양식을 방지하기 위해 무슨 일이 일어나고 있는지) onsubmit="return ajaxSubmit(this);"

또한 ajax 코드에 구문 오류가 있습니다. if 블록을 닫지 마십시오.

var data = $(formEl).serialize(); 
$.ajax({ 
    url: url, 
    data: data, 
    dataType: 'json', 
    success: function(data) { 
     if(data.success) { 
      alert("Comment Successfully Added!"); 
     } 
    } 
}); 
+0

에 추가하여'ajaxSubmit()'을 호출하고 있는데,'onsubmit' 속성에'return'을 추가하면 폼이 프로세스 페이지로 리디렉션되지 않습니다. 그러나 배열을 반향하려고 할 때 정의되지 않은 인덱스 오류가 발생합니다 ... –

+1

@TyBailey는 .serializeArray() 대신'.serialize()'를 사용합니다. – Musa

+0

좋아요, 이제 데이터가 바뀌 었습니다. 표시하고 있지만 comment.process.php 페이지에 다시 표시 중입니다 ... –

관련 문제