نمایش کشور کاربر بر اساس 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();
 
});

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


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

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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

لیست نظرات

  1. محمد براتی
    محمد براتی

    سلام بر مدیر گرامی لطفاً کد تشخیص نوع و مدل دستگاه را با استفاده از JavaScript در سایت بزارید

    11 مرداد 1400 | 14:49:40
  • حسین باقری
    حسین باقری

    درود می تونید از platform.js استفاده کنید .

    11 مرداد 1400 | 16:04:00
  • محمد براتی
    محمد براتی

    آفرین آقا حسین دمت گرم 💙 کد واقعا خوب بود

    11 مرداد 1400 | 14:27:12
  • meysam
    meysam

    سلام خسته نباشید چطوری میتونیم کاری کنیم که بدون زدن دکمه همین که صفحه فراخونی شدش نمایش بده ؟

    10 خرداد 1400 | 14:02:47
    • حسین باقری
      حسین باقری

      درود کد زیر رو می تونید استفاده کنید :

      checkIp();
      
      function checkIp() {
          
          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){
                 
                  const table = document.querySelector(".check-ip-wrapper table");
                  table.classList.toggle('ds-none');
      
                  const data = this.response;
                  
                  const countryData = [data.query , data.country , `` , 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();
      
      }
      
      10 خرداد 1400 | 20:34:23
    contact us