JSONP代码优化
1、客户端需要将函数名称传递到服务器端
2、将script请求的发送变为动态请求
3000端口的.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <Meta charset="utf-8"> 5 <title>03使用jsonp向非同源服务器请求数据（2）.html</title> 6 </head> 7 <body> 8 <button id='btn'>点我发送请求</button> 9 <script> 10 function fn2(data){ 11 console.log('客户端的fn函数被调用了'); 12 console.log(data); 13 } 14 </script> 15 <script type="text/javascript"> 16 //获取按钮 17 var btn=document.getElementById('btn'); 18 //为按钮添加点击事件 19 btn.onclick=function(){ 20 //创建script标签 21 var script=document.createElement('script'); 22 //设置src属性 23 script.src="http://localhost:3001/better?callback=fn2"; 24 document.body.appendChild(script); 25 } 26 </script> 27 </body> 28 </html>
3001端口的app.js
1 const express=require('express')
2 const path=require('path')
3 const app=express()
4 app.use(express.static(path.join(__dirname,'public')))
5
6 //
7 app.get('/test',(req,res)=>{
8 const result='fn({name:"张三"})';
9 res.send(result);
10 })
11 //03使用jsonp向非同源服务器请求数据（2）.html
12 app.get('/better',(req,res)=>{
13 var attr=req.query.callback;
14 if(attr=='fn2'){
15 s=res.send('fn2({name:"张三"})')
16 }
17 })
18
19 app.listen(3001)
20 console.log("服务器启动成功，端口号为3001")
运行结果：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
