Ajax 제출 양식의 자세한 예(코드 포함)

이번에는 Ajax 폼 제출(코드 포함)에 대한 자세한 예시를 가져오겠습니다. Ajax 폼 제출 시 주의사항은 무엇인가요?

ajax(ajax 개발)

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

저는 오랫동안 코드를 배웠지만 Ajax를 거의 사용하지 않습니다. 나중에 자세히 알아보기 위해 Ajax를 처음 사용하는 사람으로서 Ajax에 대한 의견과 이해를 정리했습니다.

Ajax, 비동기 요청, AJAX는 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

최근 Ajax 양식 제출을 테스트했습니다. 양식 제출에는 게시와 가져오기의 두 가지 유형이 있습니다. POST에 비해 GET이 더 간단하고 빠르며 대부분의 경우에 사용할 수 있습니다.

그러나 다음과 같은 상황에서는 POST 요청을 사용하는 것이 더 효율적입니다.

1. 캐시된 파일을 사용할 수 없습니다(서버의 파일 또는 데이터베이스 업데이트).

2. 서버에 많은 양의 데이터를 보내는 경우(POST에는 데이터가 없습니다.) 크기 제한)

3. 알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST는 GET

$get 메서드가 양식을 제출하는 것보다 더 안정적이고 안정적입니다.

get() 메서드는 원격 HTTP GET 요청을 통해 정보를 로드합니다

형식

$(selector).get(url,data,success(response,status,xhr),dataType)

예:

demo.php 웹페이지 요청, 2개의 매개변수 전송, 반환 값 무시:

$.get("demo.php", { 이름: "John", 시간: "2pm" } );

demo.php는 요청을 보낼 URL 주소입니다

{ name: "John", time: "2pm" } 서버로 보낼 데이터입니다.

$POST 메소드를 통해 제출 form

$.post

jQuery.post( url, [data], [callback], [type] ): POST 메서드를 사용하여 비동기 요청을 만듭니다

매개변수:

url(문자열): URL 주소 요청을 보냅니다.

data(Map): (선택) 서버로 보낼 데이터로 키/값 쌍의 형태로 표현됩니다.

callback(함수): (선택) 로딩 성공 시 Callback 함수(Response의 반환 상태가 성공인 경우에만 이 메서드가 호출됩니다).

예를 들어 등록할 때 인증 코드

<script type="text/javascript">
function redirect(url) {
location.href = url;
}
$("#code_btn").click(function(){
var tel = $("#username").val();
if(tel == ""){
alert("请输入正确的手机号码作为账号进行注册");
$("#username").focus();
return false;
}
if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){
alert("请使用正确的手机号码作为账号进行注册！");
$("#username").focus();
return false;
};
var codeNum = $("#code").val();
$.post( '{APP_PATH}index.php?m=member&c=index&a=public_send_message', {tel:tel,codeNum:codeNum}, function(result){
// console.log(result);
})
timep(60);
});
function timep(j){
$("#code_btn").attr('disabled',"true");
$("#code_btn").val(j+"秒");
time=setInterval(function(){
j=j-1;
$("#code_btn").val(j+"秒");
if(j==0){
$("#code_btn").removeAttr('disabled');
clearInterval(time);
j=60;
$("#code_btn").val("点击获取验证码");
}
},1000);
}
</script>

APP_PATH}index.php?m=member&c=index&a=public_send_message를 사용하면 요청을 보낼 URL 주소가 됩니다

{tel:tel,codeNum:codeNum} 서버로 전송되는 데이터는 키/값 쌍의 형태로 표현됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

국가 일기예보의 API 데이터를 얻기 위한 Ajax

Ajax 및 JSON 데이터 대화형 저장소

위 내용은 Ajax 제출 양식의 자세한 예(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!