简单的jsonP前后端实例

后端

用node 写的
安装express
npm i express -save
# 后端页面 app.js
const app = require('express')()//引入 express
app.listen(3333, () => {console.log(111)})

app.get('/aa', (req, res) => {//请求 /aa路径触发
	let {cb} = req.query	//获取到前端发来的callback回调函数名
	res.send(`${cb}(${JSON.stringify({data: {name: 'asd',age: 18}})})`) //把要响应的内容转换成json格式字符串--->作为 回调函数的参数 返回
})

前端

	<body>
		<button class="btn">asda</button>
		<script>
			let btn = document.querySelector('.btn') //获取按钮
			let body = document.querySelector('body') //获取body
			btn.onclick = function() {//点击事件
				let script = document.createElement('script')//创建标枪
				script.src = `http://127.0.0.1:3333/aa?cb=asd`//添加src 跟随查询参数cb  callback
				body.appendChild(script)//添加到页面上
			}
			function asd (res) {//回调函数的参数就是响应数据,
			//对响应数据进行操作
				console.log(res)
			}
		</script>
	</body>

打印:
简单的jsonP前后端实例_第1张图片

你可能感兴趣的:(js,参数,node,jsonp,js)