效果:
当前文件地址为: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);