在URL中添加查询字符串参数
- 这是最常见的方式，将参数直接添加到JSONP请求的URL中，作为查询字符串的一部分。服务器端可以通过解析URL中的参数来获取相应的值，并根据这些参数来生成相应的JSONP响应。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP传递参数示例</title>
</head>
<body>
<script>
function handleData(data) {
console.log('获取到的数据：', data);
}
</script>
<script src="https://example.com/api/data?param1=value1¶m2=value2&callback=handleData"></script>
</body>
</html>
在上述示例中，通过在URL中添加 param1=value1 和 param2=value2 两个查询字符串参数，将参数传递给服务器端。服务器端可以根据这些参数来查询或处理相应的数据，并将结果包装在 handleData 回调函数中返回。
使用全局变量传递参数
- 可以先定义一个全局变量，然后在JSONP请求的回调函数中使用该全局变量来获取参数值。这种方式相对比较灵活，可以在JavaScript代码的任何位置设置全局变量的值，然后在JSONP请求中使用。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP传递参数示例</title>
</head>
<body>
<script>
var globalParam = 'value1';
function handleData(data) {
console.log('获取到的数据：', data, '参数值：', globalParam);
}
</script>
<script src="https://example.com/api/data?callback=handleData"></script>
</body>
</html>
在上述示例中，定义了一个全局变量 globalParam，并将其值设置为 value1。在 handleData 回调函数中，可以直接使用该全局变量来获取参数值。如果需要修改参数值，只需要在发起JSONP请求之前修改 globalParam 的值即可。
动态创建脚本元素时设置自定义属性传递参数
- 在动态创建
<script>标签来发起JSONP请求时，可以为<script>标签添加自定义属性，并将参数值设置为这些属性的值。然后在服务器端，可以通过获取请求中的自定义属性来获取相应的参数。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP传递参数示例</title>
</head>
<body>
<script>
function handleData(data) {
console.log('获取到的数据：', data);
}
var script = document.createElement('script');
script.src = 'https://example.com/api/data';
script.setAttribute('data-param1', 'value1');
script.setAttribute('data-param2', 'value2');
script.setAttribute('callback', 'handleData');
document.body.appendChild(script);
</script>
</body>
</html>
在上述示例中，通过 document.createElement('script') 创建了一个 <script> 标签，并使用 setAttribute() 方法为其添加了 data-param1、data-param2 和 callback 三个自定义属性，分别设置了相应的参数值和回调函数名。服务器端可以通过获取请求中的这些自定义属性来获取参数，并根据参数生成JSONP响应。
无论使用哪种方式传递参数，都需要确保客户端和服务器端对参数的约定和处理保持一致，以便正确地传递和使用参数。同时，要注意对参数进行合法性验证和安全处理，以防止潜在的安全风险，如SQL注入、XSS攻击等。
