前端开发中，我们通常会用到AJAX技术来实现前后端之间的数据交互。但是，在某些情况下，我们需要使用非AJAX的方式来进行POST请求，例如在跨域时使用JSONP等方式。
在jQuery中，通过使用$.post()方法可以轻松地发送一个AJAX的POST请求。但如果我们需要发送一个非AJAX的POST请求，该怎么做呢？
以下是一种基于表单提交的非AJAX POST请求的实现方式：
首先，我们需要创建一个HTML表单元素，并设置其method属性为“POST”，action属性为请求的URL地址。例如：
<form id="myForm" method="POST" action="/submit"> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">提交</button> </form>
接着，我们需要使用JavaScript代码来监听表单的提交事件，并阻止表单默认的提交行为。然后，将表单中的数据格式化为URL编码的字符串，并通过动态创建一个隐藏的iframe元素来模拟POST请求的发起。最后，我们可以通过监听iframe元素的load事件来获取服务器返回的响应结果。具体代码如下：
-- -------------------- ---- -------
------------------------- ----------- -
-------------------
--- -------- - --------------------
--- ------ - -----------------------------------------
-------------------------------------------------------------------------------
-------------------------------------------- - ------ ------------- --------- - ---------------------- - ---- -
---------------------- ---------------------- --------------------- ------- -
----------
--------------------------------------------------------------
-------------------- ---------- -
--- ------------ - -----------------------------------------------
--------------------------
-------------------
---
---上述代码中，我们首先使用jQuery的$.serialize()方法将表单数据序列化为URL编码的字符串。接着，我们创建一个隐藏的iframe元素，并动态向其中添加HTML内容，以模拟POST请求的发起。最后，我们通过监听iframe的load事件来获取服务器返回的响应结果，并在处理完毕后将其从页面中移除。
需要注意的是，在采用这种非AJAX方式进行POST请求时，由于在提交表单后会刷新整个页面，因此需要特别注意保存页面状态等操作，以避免用户体验方面的问题。
总之，通过以上的实现方式，我们可以轻松地发送一个非AJAX的POST请求，实现前后端之间的数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13080