在前端开发中，我们通常需要与远程服务器进行数据交互。而对于跨域请求，JSONP 是一种常见的解决方案。但是，在某些情况下，我们可能需要发送带有 contentType 的 JSONP POST 请求。本文将介绍如何使用 jQuery 来实现这个目标。
什么是 JSONP？
JSONP (JSON with Padding) 是一种利用 <script> 标签的 GET 请求来实现跨域数据传输的方法。简单来说，就是通过动态创建一个 <script> 标签，将请求拼接成类似 http://example.com/path?callback=callbackFunction 的形式，然后将该标签添加到页面中，服务器返回的数据会被包裹在回调函数中，以便客户端可以访问。由于 JSONP 是通过 <script> 标签加载数据，因此不受同源策略的限制。
如何发送 JSONP POST 请求？
虽然 JSONP 主要用于 GET 请求，但是我们也可以通过一些技巧来实现 POST 请求。其中一种方法是使用 jQuery 的 $.ajax() 函数，并指定 dataType: 'jsonp'，这样 jQuery 将会自动将请求转换为 JSONP 格式。例如：
$.ajax({
url: 'http://example.com/path',
type: 'POST',
data: { foo: 'bar' },
dataType: 'jsonp'
});但是，上述方法只能发送不带 contentType 的 POST 请求。如果我们需要发送指定 contentType 的 JSONP POST 请求，该怎么办呢？下面将介绍一种解决方案。
带有 contentType 的 JSONP POST 请求
实现思路
我们可以将 contentType 作为一个参数传递给回调函数，并在服务器端根据该值进行相应的处理。具体来说，我们可以在回调函数中使用动态创建 <form> 表单的方式，设置 action 和 method 属性，然后将数据添加到表单中，并提交表单。这样就可以模拟出带有指定 contentType 的 POST 请求了。
示例代码
客户端代码：
-- -------------------- ---- -------
-------- ----------------------------- ----- ------------ --------- -
--- ------------ - --------------- - -----------
-------------------- - ------------------ -
------ ---------------------
----------------------------------
-------------------
--
--- ------ - ---------------------------------
---------- - --- - ------------ - ------------ - --------------- - --------------------------------
----------------------------------
-- ---------
--- ---- - -------------------------------
--------------------------- -----
--------------------------- --------
-------------------------- ----------------
--------------------------------
--------------------------------------- -
--- ----- - --------------------------------
-------------------------- ----------
-------------------------- -----
--------------------------- -----------
------------------------
---
--- ----- - --------------------------------
-------------------------- ----------
-------------------------- ---------------
--------------------------- -------------
------------------------
--------------
-服务端代码：
-- -------------------- ---- ------- ----- --------------------- ----------------- ---------------- ----- - ------- ------------ - --------------------- -- -- ----------- ------- -- ------------- --- ------------------- - ----- - ------------------- - ------ ------------- --- ------------------------------------ - ----- - ------------------------ - ---- ----------------- - --- - ----- - ---- --
使用示例：
var url = 'http://example.com/path';
var data = { foo: 'bar' };
var contentType = 'application/json';
jsonpPostWithContentType(url, data, contentType, function(response) {
console.log(response);
});总结
本文介绍了如何使用 jQuery 发送带有 contentType 的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27409