jsonp数据请求
jsonp数据请求
jsonp数据请求

在vue中测试用例

依赖

1
2
3
"axios": "^0.25.0",
"jquery": "^3.6.4",
"jsonp": "^0.2.1",

测试用例demo

后端php代码

1
2
3
4
5
6
7
8
9
10
11
12
<?php

header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据
//$json_data = '["customername1","customername2"]';
$json_data = json_encode(['foo' => "foo111", 'fei' => 'fei222']);

//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
<div>
  <h3>axios 与 jsonp</h3>
  <p>官网说明: https://github.com/axios/axios/blob/main/COOKBOOK.md#jsonp </p>

  <div>
    <details>
      <summary> 后端PHP代码 </summary>
      <pre>
        header('Content-type: application/json');
        //获取回调函数名
        $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

        //json数据
        //$json_data = '["customername1","customername2"]';
        $json_data = json_encode(['foo' => "foo111", 'fei' => 'fei222']);

        //输出jsonp格式的数据
        echo $jsoncallback . "(" . $json_data . ")";
      </pre>
    </details>
  </div>

  <div style="width: 300px;margin-top: 20px; display: flex;justify-content: space-around;">
    <button type="button" @click="getAxios"> 点击请求,Axios </button>
    <button type="button" @click="getAjax"> 点击请求,ajax </button>
    <button type="button" @click="getJsonp"> 点击请求,jsonp </button>
  </div>
</div>
</template>

<script setup>
import axios from 'axios'

import $ from 'jquery'

import jsonp  from 'jsonp';
import querystring  from 'querystring';

const getAxios = () => {
  console.log('这个会跨域调用不到数据');
  // tip:这个会跨域调用不到数据
  // axios({
  //   method: 'get',
  //   url: 'http://demo.pro_fei.com/fei.php?jsoncallback=?',
  //   params: {foo1: 'p111', foo2: 'p222'},
  //   // responseType: 'stream' // stream, json
  // }).then(res => {
  //   console.log(res);
  // }).finally(() => {
  //   console.log('最后执行');
  // })
}

const getAjax = () => {
  $.support.cors = true
  $.ajax({
    type: 'GET',
    url: 'http://demo.pro_fei.com/fei.php?jsoncallback=?',
    dataType: 'jsonp',
    async: true,
    params: {foo1: 'p111', foo2: 'p222'},
    success: function (res) {
      console.log('调用成功 ajax_jsonp');
      console.log(res);
    },
    error: function (data) {
      console.log('出错了 ajax_jsonp');
    }
  })
}

const getJsonp = () => {
  let obj = {foo1: 'p111', foo2: 'p222'};
  let q = querystring.encode(obj);

  jsonp('http://demo.pro_fei.com/fei.php?'+q, {param:'jsoncallback'}, (err, data) => {
    if (err) {
      console.error("出错了");
      console.error(err.message);
    } else {
      console.log("调用成功 jsonp");
      console.log(data);
    }
  });
}

</script>

底部

其他参考地址jsonp:

axios jsonp

php jsonp