처음 Ajax(jQuery) 2018년판
소개: Ajax란?
Ajax는 "Asynchronous JavaScript + XML"의 약자입니다. 간단히 말하면 JavaScript와 XML을 사용하여 비동기적으로 서버와의 통신을 할 수 있습니다.
Ajax를 사용하는 것으로 화면 천이를 하지 않고 HTML을 갱신하는 것이 가능하므로, 유저빌리티의 향상이나 서버 부하의 경감에 연결됩니다. AngularJS 등으로 작성한 싱글 페이지 어플리케이션은 이 기술을 중심으로 구성되어 있습니다.
간단히 정리하면 다음과 같습니다.
또, jQuery에서의 Ajax 구현이 간편하므로, 이번은 jQuery, 로컬 서버에 MAMP를 사용하고 있습니다.
처음에는 python이나 node 등의 원라이너로 로컬 서버에서 실시한다고 했습니다만, 둘 다 ajax 통신은 성공하지 않았습니다.
환경
샘플: 로그인 인증(POST 전송)
이번은, 로그인 인증을 상정해, html에서의 폼의 내용을 Ajax로 PHP에 보내, 거기로부터 돌려주어진 결과를 html에 렌더링 한다고 하는 기능을 구현합니다.
덧붙여 폼내에서의 송신 버튼을 클릭하면, 페이지 천이해 버립니다만, 이번은 Ajax의 동작 확인을 하고 싶으므로, Ajax 버튼으로 동작 확인합니다.
코드 내용
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form_1" method="post" accept-charset="utf-8" return false>
<p>名前 <input type="text" name = "userid" id ="userid"> </p>
<p>パスワード <input type="text" name = "passward" id="passward"> </p>
</form>
<button id="ajax">ajax</button>
<div class="result"></div>
<script type="text/javascript">
$(function(){
// Ajax button click
$('#ajax').on('click',function(){
$.ajax({
url:'./request.php',
type:'POST',
data:{
'userid':$('#userid').val(),
'passward':$('#passward').val()
}
})
// Ajaxリクエストが成功した時発動
.done( (data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxリクエストが失敗した時発動
.fail( (data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxリクエストが成功・失敗どちらでも発動
.always( (data) => {
});
});
});
</script>
</body>
</html>
request.php<?php
header('Content-type: text/plain; charset= UTF-8');
if(isset($_POST['userid']) && isset($_POST['passward'])){
$id = $_POST['userid'];
$pas = $_POST['passward'];
$str = "AJAX REQUEST SUCCESS\nuserid:".$id."\npassward:".$pas."\n";
$result = nl2br($str);
echo $result;
}else{
echo 'FAIL TO AJAX REQUEST';
}
?>
결과
코드 내용 설명
일반
흐름으로는
폼에 입력하여 송신→jquery의 버튼 이벤트 발화→ajax 처리 기동→지정된 url,type,data로 리퀘스트→요청처에서 데이터를 받는 리스폰스→리스폰스 데이터를 처리→화면에 반영
2014년의 기사가 됩니다만, Ajax의 내용의 설정에 대해서는, 여기 의 기사를 참고해 주세요. 이해하기 쉽습니다.
통신 결과 처리
이전에는 success, error라고 하는 방법으로 ajax가 성공·실패했을 경우의 분기를 쓰고 있었습니다만, 이렇게 하면 콜백 지옥에 빠져 버리므로, Promise 인터페이스를 이용해, done, fail로 분기 처리시킨다 이렇게 된 것 같다. 또한 성공 또는 실패 처리에 모두 호출되는 always 함수도 있습니다.
done : 통신 성공
always : fail을 포함한 처리가 완료되면 시작
fail : 통신 실패
응답 데이터
이번 샘플에서는, 여기에 userid, passward의 폼의 데이터가 포함된 캐릭터 라인의 응답을 처리하고 있습니다. 여기에서는 data라는 인수를 사용하고 있습니다만, 다른 이름으로도 가능합니다.
결론
다음은 Fastly, ServiceWorker를 만져보고 싶습니다.
Twitter: 프로그램의 이야기와 가다랭이기 때문에, 부담없이 팔로우해 주세요
htps : // 라고 해서 r. 코 m / 자키 야마 아 아
참고 URL
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form_1" method="post" accept-charset="utf-8" return false>
<p>名前 <input type="text" name = "userid" id ="userid"> </p>
<p>パスワード <input type="text" name = "passward" id="passward"> </p>
</form>
<button id="ajax">ajax</button>
<div class="result"></div>
<script type="text/javascript">
$(function(){
// Ajax button click
$('#ajax').on('click',function(){
$.ajax({
url:'./request.php',
type:'POST',
data:{
'userid':$('#userid').val(),
'passward':$('#passward').val()
}
})
// Ajaxリクエストが成功した時発動
.done( (data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxリクエストが失敗した時発動
.fail( (data) => {
$('.result').html(data);
console.log(data);
})
// Ajaxリクエストが成功・失敗どちらでも発動
.always( (data) => {
});
});
});
</script>
</body>
</html>
<?php
header('Content-type: text/plain; charset= UTF-8');
if(isset($_POST['userid']) && isset($_POST['passward'])){
$id = $_POST['userid'];
$pas = $_POST['passward'];
$str = "AJAX REQUEST SUCCESS\nuserid:".$id."\npassward:".$pas."\n";
$result = nl2br($str);
echo $result;
}else{
echo 'FAIL TO AJAX REQUEST';
}
?>
다음은 Fastly, ServiceWorker를 만져보고 싶습니다.
Twitter: 프로그램의 이야기와 가다랭이기 때문에, 부담없이 팔로우해 주세요
htps : // 라고 해서 r. 코 m / 자키 야마 아 아
참고 URL
Reference
이 문제에 관하여(처음 Ajax(jQuery) 2018년판), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
