Ajax를 사용하여 양식을 신청하십시오.

Question

저는 이것을 어떻게 수행하는지에 관해서는 정말로 단서가 없습니다. 전자 메일 단추로 구독해야하며 유효성을 검사하고 성공과로드 및 오류에 대한 약간의 메시지를 표시해야합니다.

이전에 Ajax를 사용해 본 적이 없으며 이것이 내가해야하는 일입니다. newsletter.php라는 서버의 PHP 파일에 미리 정의 된 컨트롤러를 사용하여 뉴스 레터 구독 ajax 기능을 완성하려면 ajax 요청에 대한 응답을 생성하기 위해 subscribe라는 컨트롤러 함수를 사용해야합니다.

이것이 의미가있는 경우 나를 도와주세요.

이 이메일 주소

<div id="subscribeText"> 
     <form action="" method="post" name="ContactForm" id="ContactForm" > 
     <input type="submit" name="subscribeButton" id="subscribeButton" value="Submit" /> 
     <input type="text" name="subscribeBox" id="subscribeBox" value="Enter your email address..." size="28" maxlength="28" onFocus="this.value=''" /> 
     </form> 

    </div> 

http://jsfiddle.net/vaaljan/R694T/

이 성공 오류와 거의 같은로드와 같이한다 무엇에 대한 내 양식이다. What the success message looks like

호프 이것은 너무 멀리 가져 오지 않았 으면 좋겠어. 자바 스크립트는 아직 많이 사용하지는 않았지만, 다소 이해할 수 있습니다.

감사합니다.

Answer 1

저는 jsfiddle에 대한 작은 예제를 만들었습니다.

$('#send').click(function (e) { 
e.preventDefault(); 
var emailval = $('input#email').val(); 
console.log(emailval); 
if (emailval !== "") { 
    $.ajax({ 
     cache: false, // no cache 
     url: '/echo/json/', // your url; on jsfiddle /echo/json/ 
     type: 'POST', // request method 
     dataType: 'json', // the data type, here json. it's simple to use with php -> json_decode 
     data: { 
      email: emailval // here the email 
     }, 
     success: function (data) { 
      console.log(data); 
      $('<strong />', { 
       text: 'Successfull subscribed!' 
      }).prependTo('#state'); 
     }, 
     error: function (e) { 
      $('<strong />', { 
       text: 'A error occured.' 
      }).prependTo('#state'); 
     }, 
     fail: function() { 
      $('<strong />', { 
       text: 'The request failed!' 
      }).prependTo('#state'); 
     } 
    }); 
} else { 
    alert("Insert a email!"); 
} 

});

Here it is.

그것은 AJAX 요청을 jQuery를 사용

.
이 예제는 ajax가 작동하는 방법을 보여줍니다.