Javascript Ajax에 대한 간단한 연습

3225 단어 javascriptajaxtutorialcss
저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 "Private Laravel Tutor"이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치는 것을 좋아하고 좋은 기회였습니다.
잠시 후 학생 수가 증가했고 오늘은 평균적으로 하루에 두 개의 세션이 있으며 대부분의 이전 학생들은 전 세계에서 일하고 있습니다.
오늘 저는 Working with AJAX에 대한 JS 세션을 가졌습니다. 이 커뮤니티에 초보자 친구를 위한 코드 내용을 게시합니다.

index.html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Ajax</title>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <button class="btn" id="load">Load Posts</button>
    <button class="btn" id="clear">Clear Posts</button>
    <div id="posts">

    </div>
    <script src="js/app.js"></script>
</body>
</html>




css/app.css




body {
    margin: 0;
}

#posts {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.post {
    width: 25%;
    margin: 20px;
    border: 3px solid rgb(36, 220, 91);
    padding: 10px;
}

.post:hover {
    border: 3px solid rgb(0, 0, 0);
}

.post h1 {
    font-family: cursive;
}

.btn {
    padding: 10px;
    margin: 10px;
    background-color: rgb(36, 220, 91);
    color: black;
}




js/app.js





document.getElementById("load").addEventListener("click", function () {
    url = "https://jsonplaceholder.typicode.com/posts";
    sendAjax(url);
});

function sendAjax(url) {
    let http = new XMLHttpRequest();
    http.onload = function () {
        let posts_element = document.getElementById("posts");
        let posts = JSON.parse(this.responseText);

        posts.forEach(function (post) {
            let div = document.createElement("div");
            div.className = "post";

            let h3 = document.createElement("h3");
            h3.textContent = post.title;
            div.appendChild(h3);

            let p = document.createElement("p");
            p.textContent = post.body;
            div.appendChild(p);

            posts_element.appendChild(div);
        });
    };
    http.open("GET", url);
    http.send();
}

document.getElementById("clear").addEventListener("click", function () {
    let posts_element = document.getElementById("posts");
    posts_element.textContent = ''
});


튜터를 찾고 계시다면 언제든지 연락주세요 :)
매개변수가 있는 Ruby 클래스에 모듈 포함
Xcode에서 Markdown 파일 미리보기 보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage