<p>您需要做的是使用AJAX,这是一种在页面加载到客户端浏览器后,使用JavaScript从服务器“异步”发送请求和获取响应的技术。
事实上,AJAX代表异步JavaScript和XML(尽管它不一定非得是完全异步的,也不一定要使用XML作为数据交换格式)。这是访问webapi的标准方法,比如使用Flask构建的一个api,它通过url(代表路由的url)公开在后端检索和持久化对象的能力。在</p>
<p>现代浏览器一致地公开XMLHttpRequest构造函数(<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" rel="nofollow">MDN documentation</a>),该构造函数可用于创建允许页面加载后与Web服务器通信的对象。在</p>
<p>为了提高跨浏览器的兼容性和代码的可维护性,可以使用JavaScript框架将XMLHttpRequest“包装”成自己的抽象。为了这个目的,我多年来一直在有效地使用<a href="https://jquery.com/" rel="nofollow">jQuery</a>。特别是,在您的例子中,您需要<a href="https://api.jquery.com/jQuery.ajax/" rel="nofollow">jQuery.ajax</a>方法(或者,对于POST操作,它是速记<a href="https://api.jquery.com/jQuery.post/" rel="nofollow">jQuery.post</a>)。在</p>
<p>不过,我会给你举一个小例子,说明如何使用vanilla JS来执行这样的请求,这样即使在使用框架的情况下,也能理解浏览器中的情况:</p>
<pre><code>// Create an instance of the XHR object
var postNewObject = new XMLHttpRequest();
// Define what the object is supposed to do once the server responds
postNewObject.onload = function () {
alert('Object saved!');
};
// Define the method (post), endpoint (/new) and whether the request
// should be async (i.e. the script continues after the send method
// and the onload method will be fired when the response arrives)
postNewObject.open("post", "/new", true);
// Send!
postNewObject.send(/* Here you should include the form data to post */);
// Since we set the request to be asynchronous, the script
// will continue to be executed and this alert will popup
// before the response arrives
alert('Saving...');
</code></pre>
<p>有关使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" rel="nofollow">XMLHttpRequest</a>的更多详细信息,请参阅MDN。在</p>