天易38----sturts2+jsonp的使用

一:百度介绍:

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于
server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析

二:前端使用:

<script type="text/javascript">

function test(){

$.ajax({

type: "post",

dataType:‘jsonp‘,

jsonp:‘callback‘,

data : $(‘#register_formId‘).serialize(),

url:‘http://192.168.191.1:8080/H5Web/menushowmanage/menushowmanage/jsonpTest?callback=?‘,

success:function(data){

if(data.result_code=="200"){

alert("您的操作执行成功!");

}else{

alert("操作失败")

}

},error:function(XMLHttpRequest, textStatus, errorThrown) {

alert("404");

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

alert(XMLHttpRequest.responseText);

}

});

}

</script>

三:后端示例

private String callback;//前端jsonp动态生成函数名称

/**

* get与set方法

*/

public String getCallback() {

return callback;

}

public void setCallback(String callback) {

this.callback = callback;

}

/**

* jsonp使用方法

*/

public void jsonpTest(){

System.out.println("---url:"+url+"--callback:"+callback);

Gson gson=Constants.GSON;

BaseRes bs=new BaseRes();

bs.setResult_code(SuccessCode.CLIENT_SUCCESS.getResult());

this.print(callback+"("+gson.toJson(bs)+")");//jsonp返回格式,callback表示前端jsonp提交后台的一组随机方法,但callback名称要和前端保持一致

}

返回前端页面jsonp的格式:

jQuery18007564855464734137_1431501866366({"result_code":"200"})

其中jQuery18007564855464734137_1431501866366是通过前端随机生成传递后台的callback值

时间: 2024-08-13 01:52:16

天易38----sturts2+jsonp的使用的相关文章

Angular中的jsonp

1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 1 module.controller('InTheatersController',['$scope','$http', function($scope,$http){ 2 4 var doubanApiAddress = 'https://api.douban.com/v2/movie/in_theaters'; 5 6 /!*在angua

jsonp

由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON. callback({"name": "Kate"}); 1. JSONP原理 通过script标签进行跨域操作,载入的请求js文件中的内容会执行我们在url中指定的函数,并且,传入的参数,就是我们请求的数据. 2. J

jsonp跨越请求百度搜索api,实现下拉列表提示

题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一份同样的数据,效果就不好. 机智的博主直接把百度搜索api借来一下. 直接从开发者工具,监控网络,找到请求地址. 百度api: 我把api缩减了一下,删除了大部分暂时用不上的参数. https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jQuery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. jsonp快速入门: [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章: jquery ajax中使用jsonp的限制 jQuery插件jQu

通过扩展让ASP.NET Web API支持JSONP

同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒绝.同源策略以及跨域资源共享在大部分情况下针对的是Ajax请求.同源策略主要限制了通过XMLHttpRequest实现的Ajax请求,如果请求的是一个"异源"地址,浏览器将不允许读取返回的内容.JSONP是一种常用的解决跨域资源共享的解决方案,现在我们利用ASP.NET Web API自身

紧接上篇,jQuery调用jsonp,并且在页面上展示

在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) 1 var Menu = function () { 2 3 return { 4 getMenuData: function (json) { 5 console.log(json); 6 var data = json.data; 7 var html = ""; 8 for (var i = 0 ; i < data.leng

如何使用jquery的jsonp实现仿百度下拉列表

使用了mui布局,可以换布局,这个不重要,重要的是怎么实现的 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-s

php 实现 jsonp 数据接口

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 <?php /**

三种数据交互形式:get post jsonp

一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button" value="按钮" @click="get()"/> //点击按钮请求数据函数get() 2.准备一个txt文件 welcome vue 3.编写js代码 <script> window.onload=function(){ new Vue({ el:'body', //主体为body,