نمایش کشور کاربر بر اساس ip در جاوا اسکریپت

نمایش کشور کاربر بر اساس ip در جاوا اسکریپت

نمایش کشور کاربر با ip در javascript – از آن جایی که جاوا اسکریپت برای فرانت اند استفاده می شود نمی توان به طور مستقیم آیپی کاربر را نمایش داد به همین منظور باید از یک وب سرویس خارجی استفاده کنیم .

در این آموزش از وبسایت ip-api استفاده می کنیم که اطلاعاتی از جمله آیپی , کشور , شهر و اپراتور را در اختیارمان می گذارد .


همچنین از وبسایت countryflags برای نمایش پرچم استفاده می کنیم .


فایل index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - نمایش کشور کاربر بر اساس آیپی در Javascript</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="check-ip-wrapper">

        <table class="ds-none">
            <thead>
                <tr>
                    <th>آیپی شما</th>
                    <th>کشور</th>
                    <th>پرچم</th>
                    <th>کد کشور</th>
                    <th>استان</th>
                    <th>ناحیه</th>
                    <th>اپراتور اینترنت</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
            </tbody>

        </table>

        <br>

        <button id="check-ip">بررسی آیپی آدرس</button>
    </div>



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



فایل main.css استایل برنامه

.check-ip-wrapper{
    margin: 50px auto;
    width: 80%;
    text-align: center;
    direction: rtl;
}

#check-ip{
    border: none;
    padding: 15px 35px;
    font-weight: bold;
    font-size: large;
    background-color: lime;
    opacity: 0.6;
    cursor: pointer;
}

#check-ip:hover{
    opacity: 1;
}

.check-ip-wrapper table{
    border-collapse: collapse;
    display: inline-block;
}
.check-ip-wrapper table tr td , .check-ip-wrapper table tr th{
    border: 1px solid #000;
    padding: 5px;
}

.ds-none{
    display: none !important;
}




فایل app.js ( ارسال درخواست GET )

const checkIpWrapper = document.getElementsByClassName('check-ip-wrapper')[0];
const checkIpBtn = document.getElementById('check-ip');

checkIpBtn.addEventListener('click' , function () {
    const thisElement = this;
    thisElement.setAttribute("disabled" , "disabled");
    
    
    const xhr = new XMLHttpRequest();
    xhr.open("GET","http://ip-api.com/json/");
    xhr.responseType = "json"
    xhr.onreadystatechange = function(e) {

        if (this.status === 200 && this.readyState == this.DONE){

            thisElement.remove();
            const table = document.querySelector(".check-ip-wrapper table");
            table.classList.toggle('ds-none');

            const data = this.response;
            
            const countryData = [data.query , data.country , `<img id="country-flag" src="https://www.countryflags.io/${data.countryCode}/flat/64.png">` , data.countryCode , data.regionName , data.city , data.as]

            const tdTableElement = document.querySelectorAll('.check-ip-wrapper table td');

            let counter = 0;
            for(const element of tdTableElement){
                element.innerHTML = countryData[counter];
                counter++;
            }

        }
            
        else if(this.status < 200 && this.readyState == this.DONE){
            window.alert("خطای شبکه");
            console.error("ERR");
        }
    }

    xhr.send();

});

توجه داشته باشید که برخی از وبسایت های استفاده شده در این آموزش با گذر زمان نحوه ارائه اطلاعات شان می تواند متفاوت شود .


تست برنامه ( دمو )

دانلود پروژه نمایش کشور کاربر با آیپی

ارسال نظر