jquery使用Ajax调用json数据简单例子。

最新推荐文章于 2022-01-18 17:59:12 发布
最新推荐文章于 2022-01-18 17:59:12 发布
阅读量6.4k 收藏 13
点赞数 5
文章标签： json web 前端 ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40678503/article/details/81740124
版权

html内容

<body>
        <div>点击加载json中的数据</div> 
        <input type="button" id="button" value="确定" />
        <div id="result"></div>
<body>

jquery内容

<script src="jquery.js"></script>  //加载jquery文件
<script type="text/javascript">
    $(document).ready(function(){
        $('#button').click(function(){
            $.ajax({
                type:"GET", //方式
                url:"show.json",  //路径
                dataType:"json",
                success:function(data){ //成功后执行的函数
                var show=null;
                $.each(data,function(i,n){   //each遍历json对象,i为key，n为value
                    show+="<div>"+n["Value"]+"</div>"; //获取属性为Value的值
                });
                    $('#result').append(show); //追加到div中
                }
            });
            return false;
        });
    });
</script>

json文件内容

[ 
    {"Key":"1", "Value":"java"}, 
    {"Key":"2", "Value":"jsp"}, 
    {"Key":"3", "Value":"php"},
    {"Key":"4", "Value":"asp"} 
]

执行图：
这里写图片描述

这里写图片描述

这里只是简单的获取json文件中的数据。

不认输的西瓜
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
简单的ajax数据传输和获取例子
夏天的甲虫
04-15 4590
Untitled Document ajax提交信息************************************************* email address ajax获取的个人信息*********************************
Ajax——ajax调用数据总结
u014609236的专栏
05-04 405
在做人事系统添加批量修改的功能中，需要将前台中的数据传给后台，后台并执行一系列的操作。通过查询和学习了解到可以通过ajax将值传入到后台，并在后台对数据进行操作。         说的简单点，就是ajax调用后台的方法。通过学习和实践，学习了几种ajax调用数据的几种形式，现在总结一下： 1．  Ajax调用无参的后台方法的数据 Jquery前台代码： [j
ajax 中error的参数信息
海阔凭鱼跃天高任鸟飞的博客
11-01 641
$.ajax({ url: '/cxz/add', success: function (data) { alert(data); }, error: function (xhr, textStatus, errorThrown) { /*错误信息处理*/ alert("进入error---"); alert("状态码："+xhr.status); alert("状态:"+...
使用Ajax读出json文件来进行一些操作（使用Ajax读取数据，并显示到网页中数据使用文本格式数据使用json格式）
qq_56715530的博客
11-15 5400
这一个可能对大佬来说是比较简单的，哈哈欢迎指正，咋也是刚学，老师布置的小作业，希望能帮助到大家（如果大家是写作业的话，建议不要直接复制上去，不然可能就会有挺多雷同，比较csdn是一个比较广为人知的平台，所以建议记得自己改一改哪怕是文字信息改改也行） 首先创建一个json文件名称为：“学生成绩.json” 下面是json文件： { "score":[ {"姓名":"张三","性别":"男","分数":90}, {"姓名":"李四","性别":"女","分数":98}, {"姓名":"王五
ajax调用数据
04-28
1． Ajax调用无参的后台方法数据 2． Ajax调用有参后台方法中数据 3． Ajax调用后台方法返回数组数据 4． Ajax调用xml中的数据
jquery中ajax调用json数据的使用说明
10-28
本文将深入探讨在jQuery中如何使用AJAX调用来获取和处理JSON数据。 首先，我们来看$.get()和$.post()这两个方法，它们都是用于发起HTTP请求的基本方式。尽管它们通常用于GET和POST请求，但这里我们将主要关注$.post...
JSP+jquery使用ajax方式调用json的实现方法
01-08
本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法。分享给大家供大家参考，具体如下： 前台： [removed][removed] [removed] //test function test(uid) { if(confirm(确定该用户操作+uid+吗？&#41...
ThinkPHP中使用ajax接收json数据的方法
10-25
本篇文章将详细讲解如何在ThinkPHP中使用AJAX接收JSON数据。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在前后端通信中，...
jQuery+ajax读取json数据并按照价格排序示例
10-18
在本示例中，我们探讨了如何使用jQuery和AJAX技术来读取JSON数据，并根据商品的价格进行排序。首先，我们需要了解jQuery库的作用，它是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互。...
JQuery中Ajax的操作
热门推荐
学会改变自己——才能突破
03-27 20万+
Java软件开发中，后台中我们可以通过各种框架，像SSH等进行对代码的封装，方便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进行封装控制，使我们只需要进行一些简单配置就可以实现；而Spring进行了对各种对象的管理进行封装，提供了AOP编程的方式，大大方便了我们；而Hibernate和IBatis则是对JDBC代码进行封装，不需要我们每次都写那些重复
Ajax 与异步数据传输
FareBlog
03-20 8296
基本概念Ajax 全称是异步的 JavaScript 和 XML 。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。Ajax 具有以下优点和缺点： 优点无需刷新页面，用户体验好； 异步与服务器通信，不影响主进程，响应更迅速； 可以把部分服务器
根据下拉值，使用ajax动态获取数据（在页面显示数据）
carl_jiang的专栏
02-05 8136
前端：1一个下拉html:此处省略2下面是ajax//动态选择产品：根据产品类型动态编辑产品 function changepType() { $.ajax({ async : false, url : "${ctx}/res/factoryAssembly/ajax2", type : "post", data : { ...
使用jQuery——Ajax请求本地json文件
xuanpl的博客
03-31 2万+
很多情况下，我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时，语法如下： $.ajax({name:value, name:value, ... }) 示例如下： 本地json内容为： { "list":[ { "manage":[ {"tool":"查询工具"}, {"tool":"管
在外部方法使用Ajax请求返回的数据
qq1164014750
02-12 3万+
  引言：             在业务操作中，有一个数据是通过AJax请求回来的。而且这个数据在页面上会被操作。那么这个数据就需要存放到页面上，但是在通常的ajax方法是“异步”的，就会出现数据无法拿到。         那么我们来举个例子演示一下，页面上有两个按钮，一个查询上一个月的积分，一个查询这个月的积分。在加载的数据时候，将上个月和本月的数据都加载了。 &lt;div...
Servlet如何获取ajax中以json格式传入的数据？
冷月宫主的专栏
05-01 1万+
$('#but_json_json').click(function(){             var j ={"name":"王","password":123456};                        $.ajax(                     {                         url:"servlet/JsonObject", //访
jQuery获取并解析API接口Json数据的方法
qhdzj87的专栏
01-18 2805
json是API的常用数据交换格式，在Web开发中，除了后端程序，前端也可以借助JavaScript技术获取并解析API中的json数据，这里介绍一种通过jQuery的$get()函数获取并解析API接口Json数据的方法。 其基本语法如下： $get(url,[data],[callback]) 在$get()函数中，包含了三个参数。其中：url:请求的地址;data:请求数据的列表;callback:请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二...
jQuery-jsonp和 jsonp公开接口
peichaohang的博客
01-14 600
jQuery-jsonp &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery-jsonp&lt;/title&gt; &lt;style type="text/css"&g
JQuery 用Ajax 获取Json数据并显示
xiaohongIT的博客
11-08 2万+
JQuery 用Ajax 获取Json数据并显示 JQuery: &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function(){ $(':input:eq(0)').click(function(){ ...
jQuery Ajax前后端使用JSON进行交互示例
最新发布
07-13
当使用jQuery Ajax进行前后端交互时，可以通过JSON格式来传递数据。以下是一个示例： 前端代码（HTML和JavaScript）： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button onclick="sendData()">发送数据</button> <script> function sendData() { // 创建要发送的数据对象 var data = { name: "John", age: 30 }; // 发送Ajax请求 $.ajax({ url: "backend.php", // 后端处理请求的URL type: "POST", // 请求类型 data: JSON.stringify(data), // 将数据对象转换为JSON字符串 contentType: "application/json", // 设置请求头的Content-Type success: function(response) { // 请求成功后的处理逻辑 console.log(response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); } }); } </script> </body> </html> ``` 后端代码（PHP示例）： ```php <?php // 从请求中获取JSON数据 $jsonData = file_get_contents('php://input'); // 解析JSON数据为PHP数组 $data = json_decode($jsonData, true); // 处理数据逻辑 $name = $data['name']; $age = $data['age']; // 构造响应数据 $response = array( 'status' => 'success', 'message' => 'Data received successfully', 'name' => $name, 'age' => $age ); // 将响应数据转换为JSON字符串 $jsonResponse = json_encode($response); // 设置响应头的Content-Type header('Content-Type: application/json'); // 输出响应数据 echo $jsonResponse; ?> ``` 在上述示例中，前端代码中的`sendData()`函数会在按钮点击时被调用。它创建一个包含`name`和`age`属性的JavaScript对象，并将其转换为JSON字符串。然后使用jQuery Ajax发送POST请求到后端的`backend.php`文件。后端代码中，通过`file_get_contents('php://input')`获取请求中的JSON数据，并使用`json_decode()`将其解析为PHP数组。然后可以根据需要处理数据，构造响应数据，并将其转换为JSON字符串。最后通过设置响应头的Content-Type为`application/json`并输出响应数据，完成与前端的交互。 请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值