关闭

用ajax获取json数据并在网页上面显示小例子

284人阅读 评论(0) 收藏 举报
分类:

一.存贮json的txt文本

[{"two":"Second","one":"First","people":{"age":22,"name":"x"}}]

二.ajax实现数据获取在jsp页面显示

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#btn").click(function(){
    $.ajax({
      type:"POST",
      dataType:"json",
      url:"http://localhost:8080/jsonWeb/a.txt",
      success:function(data){
      alert("success");
      $("#mydiv").html(data[0].two);
      
      },
      error:function(text,error){
      alert("wrong");
      
      
      }
    
    
    
    })
    
    
    })
    
    
    })
</script>
  </head>
 
  <body>
    <button id="btn">按钮</button>
    <div id="mydiv"></div>
  </body>
</html>


0
0
查看评论

如何将ajax得来json数据快速展示到html代码中?绝对干货

俗话说,分久必合,合久必分 什么东西都阻挡不了大势,俗话说,大势所趋就是这个道理 在多终端的环境下,以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去啦, 什么?你们还这样做? 那就有人要问了,那现在流行什么呢?请容我细细道来 那就是数据和前端绝对的分开,服务器只...
  • qiushi888
  • qiushi888
  • 2015-12-29 16:24
  • 17492

Ajax使用Action中返回的Json数据的简单实例(一)

实现原理:从Action中返回JSON格式的字符串,在ajax中获取到data,并将其转换成js的JSON数据,然后遍历 JS代码 function ajaxJson(){ $.ajax({ type:"post", url:"myAj...
  • kaidishi
  • kaidishi
  • 2013-08-06 11:57
  • 1588

Ajax 异步或取后台数据json显示到页面

今天心情很好,终于写出来了用Ajax异步获取数据,不刷新页面。         后台方法:         @RequestMapping("/uspaces.html" ) publ...
  • u013227081
  • u013227081
  • 2014-12-10 16:54
  • 3571

Ajax返回的json遍历取值并显示到前台

使用$.each(data,function(i,n){}); 可以用n.字段,取到想要的值。 $.ajax({ type: 'post', url: '/XXX', dataType: 'json', success:function...
  • qq_26079137
  • qq_26079137
  • 2017-07-27 14:44
  • 2025

微信小程序 实现获取当前位置并在地图上显示

配置app.json文件所要加载的页面 //app.json { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle&qu...
  • yelin042
  • yelin042
  • 2017-05-12 21:44
  • 4058

HTML5网页通过ajax跨域调用接口获取json数据并解析(一)

接口使用Idea设计,返回json字符串。HTML5页面使用WebStorm设计,需要导入jquery。 设计接口需要有Gson包。 一、SpringBoot接口 @PostMapping("/getUserListJson") public String getU...
  • xxkalychen
  • xxkalychen
  • 2017-09-04 10:06
  • 2350

解析JSON数据系列1:在网页上显示Json数据

Json的全称:JavaScriptObjectNotation Json的两种构建结构:“名称/值”对的集合、值的有序列表。 移动客户端(android和iphone)接收返回的数据和平台无关,平台可以是Java、.net或者php。 移动客户端请求服务器端,一般是采用Jso...
  • luoshiwutai
  • luoshiwutai
  • 2015-10-10 21:05
  • 735

JQUERY 实现AJAX跨域获取json数据实例

在项目中有时需要跨站点获取相关数据,使用ajax如何实现跨域获取json数据。 Jquery有封装好的实现方法,可以直接使用$.ajax()方法实现,只需要设置jsonp格式等相关变量即可;也可以使用$.getJSON()方法。 那么实现跨域获取数据,不得不说jsonp协议了,我们使用json是...
  • shuanzia
  • shuanzia
  • 2014-12-22 16:03
  • 5366

通过ajax返回的json数据,给下拉框默认选中显示(给下拉框赋的选中值)

//编辑数据渲染 $("#zh_update").click(function(){ if(checknum==1){ $(".zh_update").show(); //获取当前选中的参...
  • MZ199290
  • MZ199290
  • 2017-06-20 16:13
  • 1352

$.ajax()方法从服务器获取json数据几种方式详解

对$.ajax()方法从服务器获取json数据的几种方式进行详解
  • Sun9528
  • Sun9528
  • 2017-06-10 10:45
  • 12169
    个人资料
    • 访问:26463次
    • 积分:1106
    • 等级:
    • 排名:千里之外
    • 原创:85篇
    • 转载:3篇
    • 译文:3篇
    • 评论:1条
    最新评论