freecodecamp json APIs and Ajax

最新推荐文章于 2024-11-02 16:30:36 发布

xyq3949

最新推荐文章于 2024-11-02 16:30:36 发布

阅读量348

点赞数

分类专栏： javascript 文章标签： jquery json

本文链接：https://blog.csdn.net/xyq3949/article/details/72780733

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用jQuery的getJSON方法获取和处理JSON数据，将JSON转换为HTML，并介绍了如何利用JavaScript获取设备的地理位置信息。通过点击事件改变文本，结合jQuery的事件处理程序，以及Object.keys()方法来遍历JSON对象。同时，文章还讲解了如何获取用户的经度和纬度坐标。

摘要由CSDN通过智能技术生成

Change Text with Click Events

-on(), 向元素添加事件处理程序

  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $(".message").html("Here is the message");
    });
  });

Get JSON with the jQuery getJSON Method

$(selector).getJSON(url,data,success(data,status,xhr))
url 必需。规定将请求发送到哪个 URL。
data 可选。规定发送到服务器的数据。
uccess(data,status,xhr) 可选。规定当请求成功时运行的函数。

    //从服务器地址/json/cats.json，获取json数据并转换成字符串显示在类为message的元素中
      $.getJSON("/json/cats.json",function(json){
       $(".message").html(JSON.stringify(json));
      });

Convert JSON Data to HTML

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
如果你想获取一个对象的所有属性,，甚至包括不可枚举的，请查看Object.getOwnPropertyNames
MDN:Objecy.keys()
JavaScript中的可枚举属性与不可枚举属性

      $.getJSON("/json/cats.json", function(json) {

        var html = "";   
        //json,是一个元素为json对象的数组   
        json.forEach(function(val){
          var keys = Object.keys(val);
          html += "<div class='cat'>";
          keys.forEach(function(key){
            html+="<strong>" + key + "</strong>";
          });
          html +="</div><br>";
        });
        $(".message").html(html);

      });

Get Geolocation Data

获取经纬度位置

  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      $("#data").html("latitude:"+position.coords.latitude +"<br>longitude:" + position.coords.longitude);
    });
  }