您似乎正在向表单添加提交事件。
相反，向表单添加一个按钮，（按钮类型的按钮）它有助于与您不想做的事情保持一致，为按钮添加一个事件并将按钮 id 设置为 button1 .从此按钮中调用您的脚本。表单不应再自行提交。
这是一个例子，你可以更深入地学习。
<!DOCTYPE html>
<html>
<head>
<title>ajax form submit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- GOOGLE JQUERY JS v3.2.1 JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script>
// Loads before document ready...
$(document).on('click', '#button1', function(e) {
ajaxPost();
// Blur button1 for aesthetic reasons.
$('#button1').blur();
});
$(document).ready(function() {
console.log('1. Document is ready.');
// Run the App.
runApplication();
});
// We create a variable called runApplication and assign it a function runApplication()
var runApplication = function runApplication() {
console.log('1.0 runApplication() function called.');
// ajax Post.
ajaxPost();
};
/* Main AJAX function */
function ajaxPost() {
console.log('1.1 ajaxPost() function called.');
//var data = $('#form1').serializeArray();
console.log('2. Encode #form1 set of elements as a Serialized Array of objects (Names & Values)');
// Serialized Array of objects from #form1.
// Simulation purposes ONLY.
var data = [{
"name": "client_id",
"value": "111"
},
{
"name": "project_id",
"value": "222"
},
{
"name": "user_id",
"value": "465605"
}
];
// data: Serialized Array of objects (Names & Values).
console.log(data);
console.log('3. Stringify this Serialized Array of objects (Names & Values)');
// Stringify Serialized Array of objects.
data = JSON.stringify(data);
// data: Stringifyed Serialized Array of objects.
console.log(data);
console.log('3.1 data is now Valid JSON (RFC 4627).');
console.log('3.2 data to be sent is of type: ' + typeof data);
console.log('3.3 data is now ready for AJAX request.');
$.ajax({
url: 'php_pdo_mysql_insert.php', // url to post request to.
method: 'POST', // method of request. POST & GET
contentType: "application/json; charset=utf-8", // contentType is the type of data you're sending, so application/json; charset=utf-8 for JSON
dataType: 'text', // dataType is what you're expecting back from the server: json, html, text.
data: data, // data to send. Use encodeURIComponent(data) whenever you want to send "problematic" characters in the URL such as &, % etc. The opposite is decodeURIComponent.
timeout: 5000, // Longer than 5 seconds? HTTP SERVER or PHP Offline.***
// AJAX beforeSend event...
beforeSend: function() {
console.log('4. Ajax beforeSend* event fired.');
},
// AJAX success event...
success: function(data, textStatus, jqXHR) {
console.log('4.1 Ajax success* event fired.');
console.log('4.2 data received is of type: ' + typeof data);
// If data return 1 = Successful Insert Query
if (data === 1) {
console.log('Status: MySQL Insert Successful.');
}
// If data return 2 = Database Connection refused
if (data === 2) {
console.log('Status: MySQL Connection Refused.');
}
},
// AJAX error event...
error: function(jqXHR, textStatus, errorThrown) {
// If http server and/or PHP is/are offline...
if (errorThrown === 'timeout') {
console.log('5. Ajax error* event fired.');
console.log('5.1 Ajax errorThrown* timeout* of 5 seconds reached.');
console.log('5.2 Status: NGINX or PHP offline?');
}
}
// AJAX done event...
}).done(function() {
console.log('4.3 Ajax done* event fired.'); // Fired ONLY on success event fire.
// AJAX fail event...
}).fail(function() {
console.log('5.3 Ajax fail* event fired.'); // Fired ONLY on error event fire.
});
} // END ajaxPost()
// Loads before document ready...
$(document).on('click', '#button1', function(e) {
// Cancel the default action (navigation) of the click.
e.preventDefault();
// Call ajaxPost() function..
ajaxPost();
// Blur button1 for aesthetic reasons.
$('#button1').blur();
});
</script>
<form id="form1">
Client ID: <input type="text" name="client_id" value="111">
<br> Project ID: <input type="text" name="project_id" value="222">
<br> User ID: <input type="text" name="user_id" value="465605">
<p>
<button type="button" id="button1" ">button1</button>
</form>
Check Web Console <strong>Ctrl + Shift + K</strong>
</body>
</html>