纯 JavaScript 发送 POST 数据,无需表单
有没有一种方法可以使用 POST 方法发送数据,无需表单,并且无需仅使用纯 JavaScript(而不是 jQuery $.post()
)刷新页面?也许是 httprequest 或其他东西(只是现在找不到)?
Is there a way to send data using the POST method without a form and without refreshing the page using only pure JavaScript (not jQuery $.post()
)? Maybe httprequest
or something else (just can't find it now)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(13)
您可以发送它并将数据插入正文:
顺便说一下,对于 get 请求:
You can send it and insert the data to the body:
By the way, for get request:
Fetch API 旨在使 GET 请求变得简单,但它也能够发布。
如果你像我一样懒(或者只是喜欢快捷方式/助手):
The Fetch API is intended to make GET requests easy, but it is able to POST as well.
If you are as lazy as me (or just prefer a shortcut/helper):
您可以按如下方式使用
XMLHttpRequest
对象:该代码会将
someStuff
发布到url
。只需确保在创建XMLHttpRequest
对象时,它将是跨浏览器兼容的。关于如何做到这一点的例子有无数。You can use the
XMLHttpRequest
object as follows:That code would post
someStuff
tourl
. Just make sure that when you create yourXMLHttpRequest
object, it will be cross-browser compatible. There are endless examples out there of how to do that.此外,RESTful 还允许您从 POST 请求取回数据。
JS(放入 static/hello.html 以通过 Python 提供服务):
Python 服务器(用于测试):
控制台日志 (chrome):
控制台日志 (firefox):
控制台日志 (Edge):
Python 日志:
Also, RESTful lets you get data back from a POST request.
JS (put in static/hello.html to serve via Python):
Python server (for testing):
Console log (chrome):
Console log (firefox):
Console log (Edge):
Python log:
您可以使用 XMLHttpRequest、获取 API...
如果你想使用 XMLHttpRequest 你可以执行以下操作
或者如果你想使用 fetch API
You can use XMLHttpRequest, fetch API, ...
If you want to use XMLHttpRequest you can do the following
Or if you want to use fetch API
有一种简单的方法可以包装数据并将其发送到服务器,就像使用
POST
发送 HTML 表单一样。您可以使用
FormData
对象来做到这一点,如下所示:现在您可以像处理常规 HTML 表单一样在服务器端处理数据。
其他信息
建议您在发送 FormData 时不要设置 Content-Type 标头,因为浏览器会处理该问题。
There is an easy method to wrap your data and send it to server as if you were sending an HTML form using
POST
.you can do that using
FormData
object as following:now you can handle the data on the server-side just like the way you deal with reugular HTML Forms.
Additional Info
It is advised that you must not set Content-Type header when sending FormData since the browser will take care of that.
您是否知道 JavaScript 有内置方法和库来创建表单并提交它们?
我在这里看到很多回复都要求使用第三方库,我认为这是一种矫枉过正。
我会用纯 Javascript 执行以下操作:
这样 (A) 您不需要依赖第 3 方来完成这项工作。 (B) 它是所有浏览器内置的,(C) 更快,(D) 它有效,请随意尝试。
我希望这有帮助。
H
Did you know that JavaScript has it's built-in methods and libs to create forms and submit them?
I am seeing a lot of replies here all asking to use a 3rd party library which I think is an overkill.
I would do the following in pure Javascript:
This way (A) you don't need to rely on 3rd parties to do the job. (B) It's all built-in to all browsers, (C) faster, (D) it works, feel free to try it out.
I hope this helps.
H
navigator.sendBeacon()
如果您只需要
POST< /code>
数据并且不需要服务器响应,最短的解决方案是使用
navigator.sendBeacon()
:navigator.sendBeacon()
If you simply need to
POST
data and do not require a response from the server, the shortest solution would be to usenavigator.sendBeacon()
:这里最受欢迎的答案没有显示如何从 POST 获取数据。此外,当将数据发送到最新版本的 NodeJS 时,流行的“获取”解决方案在最新版本的 Chrome 中不起作用,除非您传递标头并解开 response.json() 承诺。此外,流行的答案不使用 async/await。
这是我能想到的最干净、最完整的解决方案。
The most popular answers here do not show how to get data back from the POST. Also, the popular "fetch" solutions do not work in the latest version of Chrome when sending data to the latest version of NodeJS unless you pass headers and also unwrap the response.json() promise. Also, the popular answers do not use async/await.
Here is the cleanest and most complete solution I could come up with that works.
这是您(或其他任何人)可以在他们的代码中使用的一个很好的函数:
Here is a nice function you (or anyone else) could use in their code:
您还可以使用: https://github.com/floscodes/JS/ blob/master/Requests.js
您可以轻松发送http请求。只需使用:
就这样!如果站点受 CSRF 保护,它甚至应该可以工作。
或者只是使用发送 GET 请求
You can also use this: https://github.com/floscodes/JS/blob/master/Requests.js
You can easily send a http-Request. Just use:
That's it! It should even work if the site is CSRF-protected.
Or just send a GET-Request by using
使用 jbezz 库的此功能
使用它来运行:
或
下载
jbezz
并添加到您的页面。下载链接:github.com
使用:
use this func of jbezz library
use this to run :
Or
download
jbezz
and add to your page.download link : github.com
use :