javascript - 使用ajax将多个表单提交到不同的php文件

Question

我有一个包含 3 个表单的页面

<form id="form1"  method="post">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
</form>

<form id="form2"  method="post">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
</form>

<form id="form3"  method="post">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
</form>

我想使用 ajax 中的表单 id 将表单发送到不同的 php 页面。

这是我正在尝试的脚本。

<script>
$('#form1').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form1.php",
    method:"POST",
    data:$('#form1').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form2').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form2.php",
    method:"POST",
    data:$('#form2').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form3').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form3.php",
    method:"POST",
    data:$('#form3').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

</script>

这是正确的方法吗，因为我找不到任何示例。任何示例或链接将不胜感激。

更新**

enter image description here没有显示错误

这里是 php

<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/core/include/connection.php";
include_once($path);
if(!empty($_POST)){
$name =  mysqli_real_escape_string ($databaseLink,$_POST['name']);
$city=  mysqli_real_escape_string ($databaseLink,$_POST['city']);
$sql = "INSERT INTO form1 SET name='$name' city='$city'";
$sql = mysqli_query($databaseLink,$sql);
}
?>

Answer 1

你的方法没有错，脚本会做你想做的事，但它是重复的，如果你需要添加或删除某些表单，你也需要编辑你的js。我建议您对脚本进行一些抽象，使其可重用;)

$('form.ajax-form').on('submit', function(evt){
  evt.preventDefault();
  var $form = $(this);
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data:$form.serialize(),
    beforeSend:function(){
      $form.find('.insert').val("Inserting");
    },
    success: function() {
      $form[0].reset();
      $($form.data('modal')).modal('close'); 
      Materialize.toast($form.data('success-message'), 6000, 'rounded') ; 
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="ajax-form" action="form1.php" method="post" data-modal="#modal1" data-success-message="New vendor added">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form2.php" method="post" data-modal="#modal2" data-success-message="New space added">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form3.php" method="post" data-modal="#modal3" data-success-message="New tv added">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
  <input type="submit" value="save">
</form>

P.s.请记住，如 w3 documentation 中所述

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise. For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date, Time, Number