반응형
JavaScript는 웹사이트로 request를 보내고 응답을 통해서 데이터를 얻을수 잇는데
가져온데이터를 refresh없이 특정 부분의 데이터만 변화시킬수 있는 기술
ex)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#ajaxGet").on("click", function () {
var name = $("#name1").val();
<!--ex_php1.php로 ajax통신 요청-->
$.ajax({
type : "GET",
url : "http://localhost/study/exam_php1.php",
data : {name1: name},
dataType: 'html',
success : function (data) {
alert(data);
<!--ajax통신으로 받아온 데이터를 alert경고창으로 띄우기-->
}
});
})
$("#ajaxPost").on("click", function () {
var name = $("#name2").val();
$.ajax({
type : "POST",
url : "http://localhost/study/exam_php1.php",
data : {name1: name},
dataType: 'html',
success : function (data) {
alert(data);
}
});
})
})
</script>
<title>Title</title>
</head>
<body>
<div>
<h2>ajax get Form</h2>
<input type="text" name="name" id="name1">
<input type="button" id="ajaxGet" value="제출">
</div>
<div>
<h2>ajax post Form</h2>
<input type="text" name="name" id="name2">
<input type="button" id="ajaxPost" value="제출">
</div>
</body>
</html>
exam_php1.php
<?php echo $_REQUEST['name1'] ?>님 반갑습니다.
결과 >
반응형
'WEB > Javascript' 카테고리의 다른 글
| [JavaScript] .fetch() (0) | 2020.09.07 |
|---|---|
| [JavaScript] JSON (0) | 2020.09.06 |
| [JavaScript] localStorage (0) | 2020.09.04 |
| [JavaScript] var, let, const (0) | 2020.09.04 |
| [JavaScript] .filter() (0) | 2020.09.03 |