순수 자바 script 의 ajax 는 phop 비동기 제출 폼 의 간단 한 인 스 턴 스 를 실현 합 니 다.
물론 jquery 는 비동기 제출 폼 을 실현 할 수 있 습 니 다.jquery.form.js 라 이브 러 리 도 유행 하 는 것 같 습 니 다.
다만 추가 라 이브 러 리 를 사용 하고 싶 지 않 을 때 가 있 기 때문에 자신 이 쓰 고 순수한 js 로 비동기 제출 양식 을 실현 하려 고 한다.
다음 실현(이 예 는 POST 방식 으로 제출 하고 php 를 서버 스 크 립 트 로 사용)
HTM L 파일:test
<html>
<head>
<script type="text/javascript" src="name_form.js"></script>
</head>
<body>
<form action="process.php" id="ajax_form">
Username:<input type="text" name="username" id="username"/><br>
<input type="button" onclick="submitForm('name_form')" value="Submit">
</form>
<div id="tip"></div>
</body>
</html>
function createXmlHttp() {
var xmlHttp = null;
try {
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
//IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function submitForm(formId) {
var xmlHttp = createXmlHttp();
if(!xmlHttp) {
alert(" AJAX！");
return 0;
}
var url = 'test.php';
var postData = "";
postData = "username=" + document.getElementById('username').value;
postData += "t=" + Math.random();
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if(xmlHttp.responseText == '1') {
alert('post successed');
}
}
}
xmlHttp.send(postData);
}
<?php
if(isset($_POST['username']) {
echo '1';
}
?>
주:php 파일 echo 이전에 출력 이 없 었 음 을 보증 해 야 aax 가 되 돌아 오 는 정 보 를 정확하게 얻 을 수 있 습 니 다.
이상 의 순수한 자 바스 크 립 트 의 aax 가 php 비동기 제출 폼 을 실현 하 는 간단 한 실례 는 바로 여러분 에 게 공 유 된 모든 내용 입 니 다.여러분 에 게 참고 가 될 수 있 고 여러분 들 이 저 희 를 많이 지지 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
