效果:
当前文件地址为:http://127.0.0.1:8080/
所请求的文件地址和参数为:http://127.0.0.1:3000/sendjsonp?name=likeke&age=18&cb=callback1470904676170
直接上代码吧:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>姓名:<input type="text" name="" id="myname"></p> <p>年龄:<input type="text" name="" id="myage"></p> <input id="send" type="button" value="请求发送"> </body> </html> <script> var newjsonp=function(url,data,callback){ /*需要发送的参数值*/ var queryString = url.indexOf('?') == -1 ? '?' : '&'; /*允许只传入两个参数*/ if (3 == arguments.length) { for (var item in data) { queryString += item + '=' + data[item] + '&'; } }else if(2 == arguments.length){ callback=data; } /*为防止变量冲突,给函数名加上时间戳*/ var callbackName='callback'+(new Date().getTime()); /*将回调函数暴露到全局*/ window[callbackName]=function (data) { callback(data); /*为了防止多次请求就会创建多个script节点的问题,此处先删除前一个创建的节点*/ document.body.removeChild(scriptEle); }; queryString+='cb='+callbackName; /*创建script节点,同时会发出请求*/ var scriptEle=window.document.createElement('script'); scriptEle.src=url+queryString;//请求参数 window.document.body.appendChild(scriptEle); } send.onclick=function(){ newjsonp('http://127.0.0.1:3000/sendjsonp',{ name:'likeke', age:18 },function(data){ myname.value=data.name; myage.value=data.age; }); } </script>
后端代码(nodejs):
var express = require('express'); var app = express(); app.get('/sendjsonp', function (req, res) { var name=req.query.name,age=req.query.age,callback=req.query.cb; var data={ 'name':name, 'age':age } res.send(callback+'('+JSON.stringify(data)+')'); }); var server = app.listen(3000);
相关推荐
原生Js利用Jsonp跨域实现百度搜索功能
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
jsonp跨域请求数据实现手机号码查询实例分析.docx
在js里使用Jsonp 实现跨域解决源代码实例
jquery下利用jsonp跨域访问实现方法.docx
ajax jsonp 跨域处理
原生ajax库,实现jsonp跨域,短小精悍。
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
ajax jsonp跨域传参,里面有源码,不过写在txt中了,很适合调用别人的接口
ajax跨域CORS方案 JSONP跨域请求方案.zip
本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
jsonp跨域获取数据的基础教程.docx
使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。 ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索...
jsonp跨域获取百度联想词的方法分析.docx
主要介绍了jsonp跨域请求数据实现手机号码查询的方法,结合实例形式较为详细的分析了jsonp跨域请求数据的原理与查询号码的应用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理
当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi