最原生的jsonp請求
阿新 • • 發佈：2018-12-30
廢話不多直接上程式碼，關鍵點都在註釋中。
1、前端的html程式碼
注意觀看sctipt標籤路徑的樣子
//前端程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var response="" //傳遞給後臺的函式 function jsonp_callback_function(res) { //從後臺拿到的資料在res中 response = res; // console.log(response); } </script> <script src="http://localhost:3000/api?callback=jsonp_callback_function"></script> <div id="dv"></div> </body> </html>
2、後端我是用express寫了一個簡單的介面
//後端express程式碼 var express = require("express") var app = express() // app.all('*', function (req, res, next) { // //設定跨域 // res.header("Access-Control-Allow-Origin", "*"); // next();//不能省略 // }) app.get('/api', function (req, res) { var data={ name: "王八", age: 100 } //返回的型別必須設定為javascript res.type('text/javascript') //前端路由中的引數獲取，req.query。 console.log("query",req.query); //這裡的callback是前端定義的，req.query.callback是前端的函式名 //這裡相當於將返回的資料放到函式的引數中，包裹成一個正常的函式，然後返回給前臺 //這裡的資料必須轉化為字串，否則傳入一個物件瀏覽器無法解析 res.send(req.query.callback+'(' +JSON.stringify(data)+')') }) app.listen(3000) console.log("listen the port 3000");
記住最重要的一點，jsonp請求返回給前端的是一個可執行的js函式。
這是最最簡單的jsonp請求，其實jquery已經封裝好了一套ajax的jsonp方法，需要的夥伴可以檢視官方文件。