微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ajax json实例

AJAX和JSON都是WEB开发中非常重要的技术,下面我们来看一个简单的AJAX和JSON的实例。

ajax  json实例

实例需求:点击按钮,从另一台服务器获取JSON格式的数据并将其展示在页面上。

代码如下:

<!DOCTYPE html>
<html>
 <head>
  <Meta charset="UTF-8">
  <title>AJAX and JSON Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/todos/1",success: function(result){
            $("div").text(JSON.stringify(result));
          }
        });
      });
    });
  </script>
 </head>
 <body>
  <h1>AJAX and JSON Example</h1>

  <button>Click me to load data</button>

  <div></div>
 </body>
</html>

这段代码中,我们使用了jQuery的$.ajax()方法获取数据。

首先,当按钮被点击时,执行$.ajax()方法

其中,url参数指定了我们要获取的数据的URL。我们在这里请求了一个JSON Placeholder API上的待办事项列表。

在成功获取数据后,使用success属性指定回调函数。当请求成功时会自动调用函数在这函数中,我们使用jQuery的text()方法获取到的数据展示在页面上。

在这个例子中,我们使用了JSON.stringify()方法将JSON数据转换成了字符串。我们可以把这个字符串放在页面上任何合适的元素中,比如div、p、h1等等。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐