작동 PHP 폼에 AJAX 추가하기

Question

나는 PHP 입력 양식이 $_POST[] 인 사용자 입력 확인을 위해 노력하고 있습니다.

• 자명 길이 (3-20)
• 자명 가용성
• 자명/갖고^[A-ZA-Z0-9 _] + $/
등

보다는 그것은 오류를 표시하는 완전히 새로운 페이지로 이동합니다, 나는 register.php에서 오류를 호출하는 라이브 요청을 원하므로 등록시 div에 나타납니다.

<div id="errors">" . $usernameErrors . "</div> 

나는 AJAX를 읽으려고했지만 대부분의 코드는 $ _GET []을 사용하는 것으로 나타났습니다. 현재 양식을 AJAX와 통합하려면 어떻게해야합니까?

내 현재 기본 등록 양식 논리 :

<form method="post" action="register.php"> 
    <input type="text" name="username" id="username" required /> 
    $usernameErrors 
</form> 

그리고 register.php는 이미 모든 검사가 포함되어 있습니다.

Answer 1

jQuery을 사용하는 경우 매우 간단합니다.

<script type='text/javascript'> 

    $.post('/register.php', 
      {username: $('#username').val() 
      // insert values of other fields here 
      }, 
      function(response) { 
       // update your div with errors 
       $('#errors').html(response); 
      }) 

</script>   

예를 들어 사용자가 사용자 이름을 등록 양식으로 변경하는 경우이 코드를 호출해야합니다. 백그라운드에서 발생하고 비동기 적으로 페이지를 업데이트합니다.

이 경우 register.php 스크립트는 전체 페이지가 아닌 오류 만 내 보내야합니다. 그렇지 않으면 예기치 않은 결과가 표시됩니다. :-)

Answer 2

아약스를 단순화하기 위해 jQuery (매우 강력한 JS 라이브러리)를 사용할 수 있습니다. . 프로젝트에 *** JS를 jQuery를 추가하고 페이지를 참조하십시오

<< script type="text/javascript" src="#js/jquery-ui-1.8.16.custom.min.js" /> 

그런 다음 아약스 통화를 할 자바 스크립트 함수를 만듭니다. ajax 호출에서 호출 할 php 파일과 php (콜백) 반환을 처리하는 함수를 지정합니다. 이 콜백 함수에서 본문에 오류 메시지를 추가합니다.

function verifyForm(){ 
$.ajax({ 
    type: "POST", 
    url: "register.php", 
    data: "username=NAME_GOT_FROM_FORM_&location=Boston" 
}).done(function(returned) { //the callback 
    $('#errors').html(returned); // add the string returned to div id=errors 
}); 
} 

Answer 3

그래서, 당신이 그것을 요구하고 같이 문제의 핵심은 당신이 당신의 등록 양식에 POST 요청을 사용하여 (제대로)있어 것 같다,하지만 튜토리얼 모두 GET을 사용하고 싶습니다. 여기에 두 가지 방법의 차이점에 대한 논의는 다음과 같습니다

http://thinkvitamin.com/code/the-definitive-guide-to-get-vs-post/

당신이 POST로 AJAX 요청을 제출해야 실제로 AJAX와 사용자를 등록 (보다는 검증)하는 경우. jQuery를 사용하는 경우 이미 답변이 제공됩니다. jQuery를 사용하지 않는다면 튜토리얼에서 XMLHttpRequest 객체를 찾고 어디에서 "open"메소드를 호출 할 수 있는지 찾아 본다 (참조 : http://www.w3.org/TR/XMLHttpRequest/). 그 함수의 첫 번째 매개 변수는 요청 메소드입니다 - "get"보다는 "post"로 변경하면 요청은 register.php가 예상하는 POST처럼 처리됩니다.

그 말은 AJAX가 인 것을으로 확인하는 것 같습니다. 이 경우 GET이 올바른 동사로 사용됩니다. AJAX로 수행하려는 작업은 실제로 데이터를 변경하지 않고 데이터베이스에 대한 데이터를 확인하는 것입니다. validate_registration.php와 같은 새로운 PHP 스크립트를 실제로 작성하여 register.php의 유효성 검사 로직 만 수행 한 다음 JSON 배열 (오류가 발생하지 않은 경우 비어 있음)을 반환하는 것이 좋습니다. 해당 반환 값을 기반으로 양식 제출 버튼을 활성화/비활성화 할 수 있으며 모든 작업이 정상이라면 이전 워크 플로처럼 양식을 제출할 수 있습니다.

여기서 tl; dr은 $ _GET와 $ _POST가 다른 것을 읽은 다음 AJAX 관련 유효성 검사 스크립트를 작성하여 프로세스의 데이터 검색 부분을 데이터 삽입 부. 차이점을 이해하면 나머지는 따라야합니다.