啊哈哈哈哈哈哈哈哈哈哈哈我太激动了~ 其实这个工作我一直在拖延啊,就觉得哇,好难啊,不想做欸= =

然后硬着头皮研究了一整个下午+晚上终于搞清楚了~~~~哇哈哈哈哈~~~好神奇哈哈哈哈哈~~~(疯了吧!)

json、jsonp、jQuery Ajax这些东西说定义我也不是特别研究,只懂个大概,就不去复制百科了,没意思。

一、先说我要做的事情的需求,上来就撸代码估计很多人懵逼(就像今天下午的我一样- -||)

  意图:本地服务端servlet生成json数据,我想在前端获取json数据并渲染成列表显示。

   那么  本地服务端和前端如果放在统一域名和不同域名下就是两种情况。

下面我也会通过这两种情况详细说明。

二、json数据的准备(如果已经生成过,可以略过)

微信小程序之微票前后端简易版+五天实训总结 这一篇里已经可以在servlet里生成json数据了,谷歌浏览器安装JSONView就可以看到

(注意:数据库之类的都是自己搭建的,获取的json数据的方法可以百度或者参考微信小程序之微票前后端简易版+五天实训总结)

这里生成的其实叫json数组,最后遍历的时候,看清楚是数组还是对象很重要,因为数组要写一个双重遍历。

三、前端文件和servlet同域的情况下

意思就是在同一工程下:

重要代码块:

前端html文件:

<div id="box"><div>

  

<script type="text/javascript">$(document).ready(function(){$.ajax({type: "POST",//请求方式url: "http://127.0.0.1:8080/soga/GetInfo?type=resourse",//地址,就是json文件的请求路径dataType: "json", //数据类型可以为 text xml json  script  jsonpsuccess: function(data){data=eval(data);addBox(data);alert(data);//alert函数无法解析json对象},error: function(){alert('fail');}});});function addBox(result){//result是一个集合,所以需要先遍历$.each(result,function(index1,values){$.each(values,function(index,obj){$("#box").append("<tr>"+//获得视频地址"<td><a href="+obj.resourse_path+">"+obj.word+"</a></td>"+"<td></td>"+"<td> > </td>"+"</tr>");});});}</script>  

servlet里面不用改什么!

测试:

不行吗?为啥?

请各位看看script里的127.0.0.1和这里的localhost 在jsonp这里就认为是不同域的!!所以:

ok!

四、不同域

  我把前端文件搬了家,

callback对于jsonp来说非常重要!!

前端不仅要改,servlet也要改!!

 <script type="text/javascript">$(document).ready(function(){$.ajax({type: "GET",//请求方式url: "http://127.0.0.1:8080/soga/GetInfo?type=resourse",//地址,就是json文件的请求路径 dataType: "jsonp", //数据类型可以为 text xml json  script  jsonpjsonp: "callback",jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据success: function(data){data=eval(data);addBox(data);data=JSON.stringify(data);alert(data);//alert函数无法解析json对象,so需要转化},error: function(){alert('fail');}});/*.get("http://localhost:8080/soga/GetInfo?type=resourse",function(result){//result数据添加到box容器中;addBox(result);});*/});function addBox(result){//result是一个集合,所以需要先遍历$.each(result,function(index1,values){$.each(values,function(index,obj){$("#box").append("<tr>"+//获得视频地址"<td><a href="+obj.resourse_path+">"+obj.word+"</a></td>"+"<td></td>"+"<td> > </td>"+"</tr>");});});}</script>

  servlet代码在上面提到的博客里,下面是截图修改的地方。

好,测试一下。

是可以的!

转载于:https://www.cnblogs.com/Amy-is-a-fish-yeah/p/7287269.html

jsonp跨域访问servlet接口获取json数组,并且渲染数据,前后端完整相关推荐

  1. jsonp跨域访问服务

    前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用 网站那边的接口时就存在跨域的问题,当时为了不修改网站那边 ...

  2. angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程

    官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...

  3. 介绍一个JSONP 跨域访问代理API-yahooapis

    你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用. 比如我想访问一个天气的r ...

  4. Json学习总结(3)——Jsonp跨域及Rest接口实现

    jsonp是json的一种模式,专门用来解决前端跨域请求数据的问题.它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问. 一般来讲, ...

  5. tp3 跨域_vue 跨域访问tp3接口,tp3 I()方法无法获取前端请求数据

    跨域设置: header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:G ...

  6. Jquery ajax jsonp跨域访问 返回格式及其获取方式 并实现单点登录SSO

    后台代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst ...

  7. JQuery+ajax+jsonp 跨域访问

    Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike. ...

  8. vue如何通过Nginx代理做到跨域访问API接口 解决404报错

    最近和vue对接接口发现总是访问不到 404 发现原因是 vue 使用代理 访问接口的时候前面加了一层 例如 访问 api/index/index 实际是 api/api/index/index 找到 ...

  9. ssm项目解决AJAX跨域,ssm项目跨域访问

    最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...

最新文章

  1. AbsoluteLayout 相框
  2. Myeclipse编译工程用Weblogic发布的时候jdk版本问题
  3. 高德百度坐标系转换方法
  4. 匿名函数的简单理解和应用
  5. 【狂神Mybatis笔记】配置解析
  6. VisualStudio中C++程序输出一闪而过的解决方案
  7. 权限申请弹框_安卓Q | 位置权限三态化解析,用户要关心,开发者须警惕!
  8. 【Leetcode 136】Single Number
  9. weblogic windows 打补丁_weblogic的版本及打补丁
  10. 游戏建模:场景模型制作所需软件科普,让建模更简单!
  11. 2的n次方对照表,最大256次方,2021年
  12. 初学操作系统概论小结
  13. mysql查询历史执行sql记录
  14. Ant Design Vue 相关介绍
  15. ServU配置网络盘
  16. 普通话测试软件测试成绩很差,普通话测试成绩的差异性分析
  17. ssh localhost失败:Permission denied (publickey).
  18. 1.学Python后到底能干什么?
  19. 关于QQ通讯录的应用及vcf文件导入手机的乱码问题
  20. “影响力”就是你存在的价值。文/江湖一剑客

热门文章

  1. Fan996餐饮外卖平台小程序 V1.0.1正式版
  2. 定义一个三角形类(TRI)及其派生类三角柱体类(COL)。其中三角形类可以计算三角形的面积和周长;三角柱体类可以计算柱体的体积和表面积。其具体要求如下: (1)TRI的成员如下:  私有数据成员 
  3. 虚拟化系统镜像下载地址及Linux更新国内源
  4. 刻录dvd的数据大约只能保存两年
  5. C语言绘画玫瑰花和爱心
  6. 【python】pip安装模块下载速度太慢解决方法
  7. 江西伟人系列第一篇:千古名相(王安石)
  8. Windows服务调用Quartz.net 实现消息调度
  9. VS2022换主题和背景
  10. PBI培训(1):几种主流BI工具的对比PBI中的概念定义