내 양식을 ajax로 전환하면 처리 할 수 ​​있습니까?

Question

처음부터 제출 양식을 작성하여 jquery 자습서를 많이 보았습니다. 멋진데, 기존 양식을 변환 할 수 있는지 궁금합니다.

나는 전형적인 양식을 사용하고 있으며 이메일과 공백 값을 이미 확인하고 있습니다. 지금 양식을 제출할 때 form-submit.php를 사용하여 확인 PHP 페이지로 이동합니다. 그래서하는 것이 가능하다

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" > 
<table class="formTable" cellpadding="3" cellspacing="0"> 
    <tbody><tr> 
    <td align="left"><b>Name:</b></td> 
    <td><input name="name" id="name" size="25" value="" type="text" /></td> 
    </tr> 
    <tr> 
    <td align="left"><b>Email:</b></td> 
    <td><input name="email" id="email" size="25" type="text" /></td> 
    </tr> 
    <tr> 
    <td align="left"><b>Confirm Email:</b></td> 
    <td><input name="email_confirm" id="email_confirm" size="25" type="text" /></td> 
    </tr> 
    <tr> 
    <td align="left"><b>Subject:</b></td> 
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td> 
    </tr> 
    <tr> 
    <td align="left" valign="top"><b>Message:</b></td> 
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td> 
    </tr> 
    <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr> 
</tbody> 
</table> 
</form> 

: "당신의 양식이 제출 된"

난 그냥 현재 페이지에서 사용자에게 선을주고 해당을 변경하려면 여기

은 내 양식입니다 그냥 제출 또는 onclick 모두 외부 PHP 파일을 통해 양식을 제출하고 동일한 페이지에 머물 수 있도록 변경?

Answer 1

기존 양식을 변환 할 수 있지만 onSubmit 또는 onClick 이벤트를 변경하는 것만 큼 간단하지는 않습니다.

jQuery 또는 다른 Ajax 라이브러리를 사용하여 콜백을 수행 할 때 기존 페이지에 새 컨텐츠를로드하고 있습니다. 이를 위해서는 변경할 데이터가 들어있는 레이블이 붙은 블록, 일반적으로 div가 필요합니다. 또한 콜백에 대한 배치 코드를 작성하여 코드를 보내고 페이지의 HTML을 업데이트해야합니다.

양식의 빠르고 더러운 버전은 div 태그에 표를 래핑하는 것이고 Ajax 호출은 해당 div에 대해 새 HTML을 반환합니다. onsubmit에 대한 새로운 타겟은 위에서 설명한 콜백의 코드입니다.

jQuery를 사용하고 올바른 위치를 가리 키기 위해 모든 작업을 수행해야합니다. prototype.js를 사용할 때 jQuery 프로세스를 자세히 설명 할 수는 없지만 읽고있는 모든 자습서는 할 수 있습니다.

Answer 2

예, onclick 양식 동작을 javascript : myajaxsubmit() 함수로 변경할 수 있습니다.

Answer 3

예입니다. 좀 자바 스크립트를 도입 제안 (다음 예는 jQuery를 사용) :

<script type="text/javascript"> 
// when the DOM is ready 
$(document).ready(function() { 
    // bind some code to the form's onsubmit handler 
    $('form[name=theForm]').submit(function() { 
     if(formCheck(this)) { 
      // $.post makes a POST XHR request, the first parameter takes the form's 
      // specified action 
      $.post($("form[name=theForm]").attr('action'), function(resp) { 
       if(resp == '1') { 
        alert('Your form has been submitted'); 
       } else { 
        alert('There was a problem submitting your form'); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 

제출 위 핸들러의 끝에 반환 거짓은 전통적인 방법으로 (URL을 다음) 형태의 액션을로드에서 브라우저를 방지 . 또한 Javascript가없는 경우 양식이 이전 학교 방식을 제출하므로 본질적으로 표준 양식 구현 위에 유용성 계층을 추가하여 정상적으로 성능이 저하됩니다.

사실적인 피드백을 사용자에게 제공하는 것이 항상 좋은 생각임을 지적하고 싶습니다. 말하자면, 폼의 아약스 게시는 서버로부터 이것에 대한 몇 가지 표시를 캡처 할 수 있습니다. 위의 예에서 '1'은 레코드가 성공적으로 저장되었다는 것을 의미하고 '0'은 그렇지 않았 음을 의미합니다. 저장된 (쿼리 실패 등). 사용자에게 표시되는 메시지는이 결과에 따라 다릅니다.