JQuery 使用 .Post() 方法提交表单数据
.post 方法被认为是 .ajax 方法的简写。
它的语法更具描述性。
看看如何正确使用它：
<!DOCTYPE html>
<html>
<head>
<title>jQuery post form data using .post() method </title>
<style>
div {
margin: ;
}
</style>
</head>
<body>
<h1>jQuery post form data using .post() method</h1>
<div>Filling out and submitting the form below to receive a response.</div>
<!-- our form -->
<form id="userForm" action="/form/submit" method="post">
<div>
<input type="text" name="firstname" placeholder="Firstname" />
</div>
<div>
<input type="text" name="lastname" placeholder="Lastname" />
</div>
<div>
<input type="email" name="email" placeholder="Email" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<!-- where the response will be shown -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#userForm').submit(function() {
//showing that something is loading
$('#response').html("Loading response...");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data quickly
* function(data){... - data includes the response from post_receiver.php
*/
$.post('post_receiver.php', $(this).serialize(), function(data) {
//demonstrate the response
$('#response').html(data);
}).fail(function() {
//if posting your form fails
alert("Posting failed.");
});
//to restrain from refreshing the whole page, the page
returns false;
});
});
</script>
</body>
</html>
jQuery 使用 .Post() 方法发布 JSON 数据
作为添加信息，我们在这里为我们提供了一个关于如何发布 JSON 数据的示例。
为此，我们需要生成一个 JSON 字符串并将其发布，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>jQuery post JSON data using .post() method</title>
</head>
<body>
<h1>jQuery post JSON data with .post() method</h1>
<div>Click the button below to receive a response.</div>
<!-- our form -->
<input type="button" value="Post JSON" id="postJson" />
<!-- where the response will be shown -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#postJson').click(function() {
//showing that something is loading
$('#response').html("Loading response...");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data easily
* function(data){... - data includes the response from post_receiver.php
*/
$.post('post_receiver.php', {
user_id: "143",
username: "ninjazhai",
website: "https://codeofaninja.com/"
}, function(data) {
//demonstrate the response
$('#response').html(data);
}).fail(function() {
//if posting your form failed
alert("Posting failed.");
});
//to restrain from refreshing the whole page page
returns false;
});
});
</script>
</body>
</html>
关于 jQuery Ajax Get() 和 Post() 方法
这些方法用于使用 HTTP get 或者 post 请求从服务器请求数据。
它们主要用于实现客户端和服务器之间的请求和响应。
Get 用于从特定资源请求数据。
Post 用于将要处理的数据提交给特定资源。
jQuery 使用 .Ajax() 方法提交表单数据
使用 .ajax() 方法是解决该问题的最佳方法之一。
以下是我们应该如何使用此方法创建 jQuery 发布请求：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 使用 .ajax() 方法提交表单数据</title>
<style>
div {
margin: ;
}
</style>
</head>
<body>
<h1>jQuery post form data with the .ajax() method</h1>
<div>Filling out and submitting the form below to receive a response.</div>
<!-- our form -->
<form id="userForm" action="/form/submit" method="post">
<div>
<input type="text" name="firstname" placeholder="Firstname" />
</div>
<div>
<input type="text" name="lastname" placeholder="Lastname" />
</div>
<div>
<input type="email" name="email" placeholder="Email" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<!-- where the response will be displayed -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#userForm').submit(function() {
//showing that something is loading
$('#response').html("Loading response...");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data quickly
* function(data){... - data includes the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data) {
//demonstrate the response
$('#response').html(data);
})
.fail(function() {
//if posting your form failed
alert("Posting failed.");
});
//to restrain from refreshing the whole page, it
returns false;
});
});
</script>
</body>
</html>
为什么要使用 jQuery 来处理 Ajax 请求？
在这篇文章中，我们展示了使用 jQuery 发出 ajax 发布请求的几种方法。
你可能会问为什么要使用它。
在实践中使用它的原因很明显：它为我们提供了最简单、简短和可读的代码。
在此教程中，我们将介绍如何使用 PHP 创建 jQuery Ajax POST请求。
此外，我们还可以了解如何使用 jQuery 轻松快速地提交 JSON 数据。
日期：2020-06-02 22:15:47 来源：oir作者：oir