Đáp án bài tập Javascript cơ bản Ajax – Hiển thị công việc

Đây là đáp án của Bài tập 2: Thiết kế một trang tìm kiếm việc làm.

Giao diện gồm trang chủ có tìm kiếm và phần hiển thị các công việc (index.html) tương ứng, với mỗi công việc khi đi vào chi tiết sẽ thấy các kĩ năng (skill.html) tương ứng, ứng với mỗi kĩ năng thì có nhiều công việc phù hợp (job.html).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"> </script>
    <style> 
    a{
        text-decoration: none
    }    
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="spinner-border text-dark" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    <!-- <form> -->
        <table>
            <tr>
                <td>
                Tìm kiếm: <input id="jobTitle" type="text" name="jobTitle" placeholder="nhập vào để tìm kiếm"><br>
                        <button id="searchButton">Search</button>
            </td>
            </tr>
        </table>
     <!-- </form> -->
    <h1></h1>
    <table id= "jobs" ></table>
</body>
</html>
var params = new URLSearchParams(window.location.search);
console.log(params.get("jobTitle"));
var jobTitle = params.get("jobTitle");

console.log(window.location.search);
$(document).ready(function() {
    // if (jobTitle) {
    //     showData(
    //         `http://api.dataatwork.org/v1/jobs/autocomplete?contains=${jobTitle}`
    //     );
    // } else {
    //     showData("http://api.dataatwork.org/v1/jobs");
    // }
    showData("http://api.dataatwork.org/v1/jobs");
    $("#searchButton").click(function() {
        var title = $("#jobTitle").val();
        if (title) {
            showData(
                `http://api.dataatwork.org/v1/jobs/autocomplete?contains=${title}`
            );
        } else {
            showData("http://api.dataatwork.org/v1/jobs");
        }
    });
});

function showData(url) {
    $(".spinner-border").show();
    $.getJSON(url, function(jobs) {
        let vieclam = "";
        vieclam += `<tr>
    <td class="text-dark">Title </td>
    <td class="text-dark">UUID</td>
    </tr>`;
        jobs.forEach(job => {
            const { title, uuid, normalized_job_title } = job;
            if (title) {
                // console.log("title :", title);
                vieclam += `<tr><td><a href="job.html?id=${uuid}">${title}</a></td><td class="text-danger">${uuid}</td></tr>`;
            } else {
                vieclam += `<tr><td><a href="job.html?id=${uuid}">${normalized_job_title}</a></td><td class="text-danger">${uuid}</td></tr>`;
            }
        });
        $("#jobs").html(vieclam);
        $("h1").html(`Có ${jobs.length} công việc `);
    }).done(function() {
        console.log("second success");
        $(".spinner-border").hide();
    });
}

skill.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="skill.js"> </script>
    <title>Skill</title>
</head>
<body>
        <h1></h1>
        <table id="jobs" ></table>
</body>

</html>
var params = new URLSearchParams(window.location.search);
$(document).ready(function() {
    $.getJSON(
        `http://api.dataatwork.org/v1/skills/${params.get("id")}/related_jobs`,
        function(data) {
            let jobTr = "";
            data.jobs.forEach(job => {
                const { job_uuid, job_title } = job;
                jobTr += `<tr><td><a href="job.html?id=${job_uuid}">${job_title}</a></td><td>${job_title}</td></tr>`;
            });
            $("#jobs").html(jobTr);
            $("h1").html(`Có ${data.jobs.length} job`);
        }
    );
});

job.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="job.js"> </script>
    <title>Job</title>
</head>
<body>
        <h1></h1>
        <table id="skills" ></table>
</body>

</html>
var params = new URLSearchParams(window.location.search);
$(document).ready(function() {
    $.getJSON(
        `http://api.dataatwork.org/v1/jobs/${params.get("id")}/related_skills`,
        function(data) {
            let skillTr = "";
            data.skills.forEach(skill => {
                const {
                    skill_uuid,
                    skill_name,
                    skill_type,
                    description
                } = skill;
                skillTr += `<tr><td><a href="skill.html?id=${skill_uuid}">${skill_name}</a></td><td>${description}</td></tr>`;
            });
            $("#skills").html(skillTr);
            $("h1").html(`Có ${data.skills.length} skill`);
        }
    );
});