HTML表单AJAX提交怎么写_HTML中使用AJAX提交表单的代码与方法

<form id="myForm">
  <label>姓名：<input type="text" name="name" required></label><br>
  <label>邮箱：<input type="email" name="email" required></label><br>
  <button type="submit">提交</button>
</form>
<div id="result"></div>

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交

  const formData = new FormData(this); // 收集表单数据
  const object = {};
  formData.forEach((value, key) => { object[key] = value });

  fetch('/submit-form.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(object)
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById('result').innerHTML = '提交成功：' + data.message;
  })
  .catch(error => {
    document.getElementById('result').innerHTML = '提交失败：' + error;
  });
});

$('#myForm').on('submit', function(e) {
  e.preventDefault();

  $.ajax({
    url: '/submit-form.php',
    type: 'POST',
    data: $(this).serialize(), // 自动序列化表单
    success: function(response) {
      $('#result').html('提交成功：' + response.message);
    },
    error: function() {
      $('#result').html('提交失败');
    }
  });
});

$data = json_decode(file_get_contents('php://input'), true);
$name = $data['name'];
$email = $data['email'];

// 处理数据...
echo json_encode(['message' => '数据已收到']);

$name = $_POST['name'];
$email = $_POST['email'];
echo json_encode(['message' => '提交成功']);