비동기식으로 서버에 데이터 전송

비동기식이므로 페이지 로드에 관계 없이 이벤트가 처리된다. 즉 페이지 로드와 이벤트 처리가 분리된다

폼에 데이터를 입력하고 전송 버튼을 누르면 pocess.php가 호출된다

폼에 입력된 문자를 process.php가 받아서 결과를 전송할 수 있다

비동기식을 필요로 한 이유는 검색 폼 자동완성 기능을 위해서는 검색어 리스트가 필요한데 이 검색어 리스트를 서버에서 받아오기 위해서이다.

mysql에는 php를 이용하여 접속할 것이다

sendseverphp.zip


<html>
<head>
<script src="./jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" name="postForm">
<ul>
<li>
<label>Name</label>
<input type="text" name="name" id="name" placeholder="Bruce Wayne">
<span class="throw_error"></span>
</li>
</ul>
<input type="submit" value="Send" />
</form>
<div id="success">before send message</div>
</body>



<script>
$(document).ready(function() {
$('form').submit(function(event) { //Trigger on form submit
$('#name + .throw_error').empty(); //Clear the messages first
$('#success').empty();

//Validate fields if required using jQuery

var postForm = { //Fetch form data
'name' : $('input[name=name]').val() //Store name fields value
};

$.ajax({ //Process the form using $.ajax()
type : 'POST', //Method type
url : 'process.php', //Your form processing file URL
data : postForm, //Forms name
success : function(data) {
$('#success').append('<p>' + data + '</p>'); //If successful, than throw a success message
}
});
event.preventDefault(); //Prevent the default submit
});
});
</script>
</html>



덧글

댓글 입력 영역



통계 위젯 (화이트)

06
25
5598