Ajax学习：jQuery发送jsonp请求

最新推荐文章于 2024-07-25 22:24:14 发布

¡Venceremo

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量482

点赞数

分类专栏： Ajax 文章标签： jquery ajax 学习

本文链接：https://blog.csdn.net/weixin_47295886/article/details/128154585

版权

Ajax 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

crossorigin="anonymous":防止jQuery报错

点击按钮--发送请求返回结果在div中呈现

//jquery发送请求需要补充参数callback=? 固定写法用来跨域的

虽然我们填写的是？,但是有参数值的，服务端可以接收到这个参数，服务端把接收到的参数值，作为函数调用的函数去拼接字符串，也就是说jquery已经编写了一个函数了

前端页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
	<style>
		#result{
			width: 300px;
			height: 100px;
			border: 1px skyblue solid;
		}
	</style>
	</head>
	<body>
		<button>点击发送jsonp请求</button>
		<div id="result"></div>
		<script>
			$('button').eq(0).click(function(){//jquery发送请求 需要补充参数callback=? 固定写法用来跨域的
				$.getJSON('http://127.0.0.1:9000/jquery-jsonp?callback=?',function(data){
					//data就是接收的数据

					$('#result').html(`
					名称：${data.name}<br>
					校区：${data.city}					`)

				})
			})
		</script>
	</body>
</html>

服务器部分：

const {
	json
} = require('express');
const express = require('express')

const app = express();


app.get('/jquery-jsonp', function(requset, response) {

	const data = {
		name:'李四',
		city:['北京','上海','广州']
	};
	//将数据转化为字符串
	let str = JSON.stringify(data);
	//返回结果 不可以是数据 j代码 end防止添加不知名的响应头 模板字符串是需要传递字符串的
	//``模板字符串 方便拼接
	//${str}这里的是对象
	//服务端接收callback的值
	let callback=requset.query.callback;
	response.end(`${callback}(${str})`);//返回函数的调用 然后进行解析处理

})

app.listen(9000, () => {
	console.log('9000启动成功')
})

¡Venceremo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习：jQuery发送jsonp请求

crossorigin="anonymous":防止jQuery报错。,但是有参数值的，服务端可以。点击按钮--发送请求返回结果在div中呈现。//jquery发送请求需要补充参数。函数调用的函数去拼接字符串，也就是说。jquery已经编写了一个函数了。，服务端把接收到的参数值，作为。
复制链接

扫一扫

专栏目录