PHP로 게시하는 Ajax

Question

PHP 5.3을 사용하는 로컬 Apache 2.2 서버에서 jQuery ajax 게시 메소드를 테스트하고 있습니다 (완전히 새로운 기능). 다음은 같은 폴더에있는 모든 파일입니다.

HTML 바디 (jQuery 라이브러리 헤드 포함)

<form id="postForm" method="post"> 
    <label for="name">Input Name</label> 
    <input type="text" name="name" id="name" /><br /> 
    <label for="age">Input Age</label> 
    <input type="text" name="age" id="age" /><br /> 
    <input type="submit" value="Submit" id="submitBtn" /> 
</form> 
<div id="resultDisplay"></div> 
<script src="queryRequest.js"></script> 

queryRequest.js

$(document).ready(function(){ 
    $('#s').focus(); 
    $('#postForm').submit(function(){ 
     var name = $('#name').val(); 
     var age = $('#age').val(); 
     var URL = "post.php"; 

     $.ajax({ 
        type:'POST', 
        url: URL, 
        datatype:'json', 
        data:{'name': name ,'age': age}, 
        success: function(data){ 
         $('#resultDisplay').append("Value returned.<br />name: "+data.name+" age: "+data.age); 
        }, 
        error: function() { 
         $('resultDisplay').append("ERROR!") 
        } 
       }); 
    }); 
}); 

post.php

<?php 
$name = $_POST['name']; 
$age = $_POST['age']; 
$return = array('name' => $name, 'age' => $age); 
echo json_encode($return); 
?> 

두 필드를 입력하고 누르면 '제출 ', 성공 메서드는 텍스트 추가, 호출되지만 아약스 게시물에서 반환 된 값은 정의되지 않습니다.

초 후에 텍스트 필드가 비워지고 div에 추가 된 텍스트가 사라집니다. 그것은 빈 페이지 플래시가 없기 때문에 페이지 리프레쉬 인 것처럼 보이지 않습니다.

여기 무슨 일 이니? 어리석은 실수라고 확신하지만 방화범이 끌리지는 않습니다.

는

UPDATE :

는

파이어 버그 그물을 확인 후, 그것은 POST 반환 상태가 200임을 보여 주지만이 예상 JSON 객체의 3 시간을 반환

{"name":"asd","age":"123"}{"name":"asd","age":"123"}{"name":"asd","age":"123"} 

Answer 1

당신을 위해 일을해야

  $('#postForm').submit(function(event){ 
      event.preventDefault(); 

에 queryRequest.js의 3 행을 변경. 양식이 페이지를 다시로드하지 못하게하십시오.

편집 : 그냥 내 로컬 환경에 모든 코드를

을 복사하여 event.preventDefailt()을 추가했다. Reload가 취소되었고 serverresponse가 좋았지 만 (3 번 응답이 아님) 두 값 모두에 대해 undefined이 표시되었습니다.

datatype을 작성했지만 dataType이 아니라는 것을 모두 확인한 후에. 변경 후 div의 응답은 name: 1234 age: asdf

Answer 2

나는 생각 정상적인 양식 제출은 AJAX 게시 기능뿐만 아니라 실제로 발생합니다. 양식의 기본 동작을 취소해야합니다 preventDefault()이 작동 방식을 볼 수 있습니다 here. 아마 뭔가 간단 그래서

기본적으로 당신이 그것의 모습에,

$('#postForm').submit(function(){ 

은 "정의되지 않은"포스트 값에 관해서

$('#postForm').submit(function(event){ 
event.preventDefault(); 

와 코드 행을 대체 할 코드는 소리를 본다 우리는 간과했다.

이

• 실제로 헤더에 전송되는 (확인이되지 POST를 통해 전송되는)
• 데이터를 확인 호출되는 URL은 올바른
을 보장하기 위해 : 나는 몇 가지 빠른 정신 검사를 할 FireBug을 사용 밖으로 모든 검사는 PHP 측이 아마 경우 데이터가 당신이 거기

부적당 한 아무것도 발견 할 수 있는지 반환 확인

, 같은 간단한 것을 시도

print_r($_POST); 

이렇게하면 보내지는 모든 게시 값을 출력하므로 원시 형식 (JSON으로 인코딩하기 전에)으로 데이터를 볼 수 있으며 실제로 데이터를 수신하고 있는지 확인할 수 있습니다. 일단 데이터를 게시하면 FireBug를 통해이 파일을 열어야합니다.

Answer 3

당신은 페이지 새로 고침으로 이어지는, 핸들러

$('#postForm').submit(function(){ 
    blah... 
    return false; // <-- Add this line 
}); 

내가 요청이 실행을 생각하지만 그것은 일반 게시물로 다시 시작이야 제출에서 false를 반환해야합니다. Firebug는 2 개의 POST 요청을 표시합니까? 피 들러는 뭐라고 말합니까?

참고 : return false는 preventDefault()

Answer 4

당신은 항상 빈 페이지 플래시를 볼 수 없습니다를 호출 한 것과 같은 상태가된다. 로컬 (빠른 연결)을 개발 중이거나 페이지가 캐시 된 경우 즉시 표시 될 수 있습니다. "Net"탭에서 "persist"옵션을 사용하면 페이지가 다시로드 될 때 Firebug가 Net 패널을 지우지 않게 할 수 있습니다. 그런 다음 재로드 여부를 알 수 있어야합니다.

제출 기능이 기본 동작을 방해하지 않으며 다시 false를 반환하지 않으므로 다시로드하지 않습니다.

Answer 5

올바른 동작입니다. PHP에 대한 동기 호출을 수행하는 양식을 게시 할 때 비동기 호출도 실행되고 페이지가 다시로드되기 전에 발생할 수 있지만 그렇게하는 것은 유용하지 않습니다.

<form>을 사용하지 않으려면 <input type="button">을 제출하고 $("#buttonid").click()으로 통화에 onclick 이벤트를 연결하십시오.

JS가 비활성화 된 사람들을 위해 양식을 보관하려면 (좋은 일) submit시에 false를 반환하면 동기 호출을 방지 할 수 있습니다.