提交表单时HTML页面刷新，如何阻止并通过Ajax无刷新发送数据？

Hey there! Let's fix your issue step by step—first stopping that annoying page refresh when submitting the form, then getting the Ajax part working properly.

一、为什么你的当前代码没生效？ #

First off, the main problem in your code is that you bound the submit event to the <button> element. But the submit event belongs to the <form> element itself—when you click the submit button, it triggers the form's submit event, not the button's. That's why your preventDefault() wasn't kicking in, and the page kept refreshing.

二、阻止表单刷新的正确方式 #

To stop the page from reloading on form submit, you need to intercept the form's submit event and call e.preventDefault() on the event object. This is the most flexible and recommended approach:

$("form").submit(function(e) {
  // Block the form's default submit behavior (aka page refresh)
  e.preventDefault();
  // Your Ajax logic goes here next
});

There's also a simpler but less flexible alternative: add onsubmit="return false;" directly to the form tag. But this won't let you run any Ajax logic alongside, so the event binding method is better for your use case.

三、用jQuery Ajax实现无刷新数据发送 #

Once you've blocked the default refresh, you can send data to your backend via Ajax. Here's your code fixed and improved:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无刷新表单提交</title>
</head>
<body>
<!-- Added name and id to the input for easier, more reliable value fetching -->
<form action="#">
  <input type="text" name="album" id="albumInput">
  <button type="submit">提交</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
// Bind to the form's submit event instead of the button
$("form").submit(function (e) {
  // Stop the page from refreshing
  e.preventDefault();
  
  // Get the input value using the id selector (more precise than just $("input"))
  var inputValue = $("#albumInput").val();
  
  // Send the Ajax request
  $.ajax({
    type: 'POST', // Request method (uppercase is fine too)
    url: 'data.php', // Your backend processing file
    data: { 
      album: inputValue // Data to send—match the key name to what your backend expects
    },
    success: function(response) {
      // Callback for successful request
      alert("提交成功！后端返回：" + response);
    },
    error: function(xhr, status, error) {
      // Added error handling to make debugging easier
      alert("提交失败：" + error);
    }
  });
});
</script>
</body>
</html>

Quick code breakdown: #

• Added name and id to the input: Using an id selector ensures you grab the right input value, even if you add more inputs to the page later.
• Bound the event to the form: This ensures we catch the submit action every time, whether the user clicks the button or presses Enter.
• Added error handling: Helps you debug if something goes wrong with the request (like a typo in the backend URL).
• The album key in the data object should match the parameter name your backend uses to receive the data (e.g., $_POST['album'] in PHP).

四、Sample Backend Code (data.php) #

If you need a simple backend to test with, here's a quick PHP example:

<?php
// Get the album parameter sent from the frontend
$album = $_POST['album'] ?? '';
// Add your data processing logic here (like saving to a database)
// For testing, just send back a confirmation
echo "收到的内容：" . $album;
?>

With this setup, your form will submit data without reloading the page, and you'll get a response from your backend to confirm it worked.

内容的提问来源于stack exchange，提问作者Lakshmanan Kumar