5분 이내에 개발 환경에서 Javascript의 Ajax를 움직이고 싶은 사람에게
「세세한 것은 좋으니까, JS의 Ajax는 어떻게 써, 어떤 거동한다??」라고 하는 것을 알고 싶은 사람용입니다.
이렇게 할 수 있습니다.
하는 것은 간단합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function () {
$('#ajax-button').click(
function () {
$.ajax({
url: 'http://www.ekidata.jp/api/p/20.json',
type: 'GET',
dataType: 'script',
timeout: 1000,
success: function (data, dataType) {
for (var i = 0; i < 10; i++) {
var text = xml.data["line"][i]["line_name"];
document.write(i + 1, '番目の中身は、', text, 'でした</br>');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("ng");
console.log("ng", XMLHttpRequest, textStatus, errorThrown);
}
});
});
});
</script>
</head>
<body>
<input type="button" id="ajax-button" value="push button"/> <br/>
<div id="text"></div>
</body>
</html>
간단히 소스 코드 설명
이번에 사용한 API
역 데이터.jp이 준비한 것을 사용했습니다. 도도부현 코드는 고정치로 20을 세트 하고 있습니다.
[여담] POST 내용을 바꾸거나 루프하는 횟수를 바꾸어도 좋을 것 같다.
도와준 자료들...thanks!!
최초의 Ajax(jQuery) 2018년판 ... "Ajax란??"에 대한 설명이 고맙습니다.
Ajax는 "Asynchronous JavaScript + XML"의 약자입니다. 간단히 말하면 JavaScript와 XML을 사용하여 비동기적으로 서버와의 통신을 할 수 있습니다.
Ajax를 사용하는 것으로 화면 천이를 하지 않고 HTML을 갱신하는 것이 가능하므로, 유저빌리티의 향상이나 서버 부하의 경감에 연결됩니다. AngularJS 등으로 작성한 싱글 페이지 어플리케이션은 이 기술을 중심으로 구성되어 있습니다.
Javascript의 Ajax에 대한 기본 요약 ... 구현에 대한 한 가지 흐름을 알 수 있습니다
읽어 주셔서 감사합니다.
불명점, 또는 실수 있으면 코멘트 받을 수 있으면 다행입니다.
Reference
이 문제에 관하여(5분 이내에 개발 환경에서 Javascript의 Ajax를 움직이고 싶은 사람에게), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/taishinagasaki/items/b12c9aebb8e9e3159c01텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
