javascript - 在 jQuery 中通过 AJAX 发送表单，然后保存在 MySQL 中，但不起作用

Question

如标题所示，我是网站设计的初学者。如果我问一个愚蠢的问题，请不要介意。当我发送表格时，它不起作用。

这是 html:

  <form id="form1" name="form1" action="toSQL.php" method="POST" accept-charset="utf-8">
  <input type="text" name="Cliname" id="textfield" maxlength = "10" />
  <textarea name="message" id="message"  rows="3" maxlength = "20" ></textarea>
  <input type="submit" value="submit" id="submit" />
  </form>
  <div class="alert"></div>

这是 js:

<script type="text/javascript">
$(document).ready(function() {
   var form = $(this) ;
   var submited = $('#submit') ;
   var alerted = $('.alert') ;

   form.on( 'submit', this, (function(event) {      
       event.preventDefault();
       if ( $.trim($form.find('input[name="Cliname"]').val()) == "" || $.trim($form.find('input[name="message"]').val()) == "" ) {
           alert( "please enter!!" ) ;
           return ;
       }
       else {
           $.ajax({
               url: 'toSQL.php', // form action url
               type: 'POST', // form submit method get/post
               dataType: 'html', // request type html/json/xml
               data: form.serialize(), // serialize form data 
               beforeSend: function() {
                   alerted.fadeOut();
               },
               success: function(data) {
                   alerted.html(data).fadeIn(); // fade in response data
                   form.trigger('reset'); // reset form
               },
               error: function(e) {
                   console.log(e)
               }
           });
       }
   }));
});
</script>

服务器端PHP:

<?php  
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
  if (isset($_POST['Cliname']) AND isset($_POST['message'])) {
    $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    $message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);

    if (send($name, $message)) {
      echo 'Message sent!';
    } else {
      echo 'Message couldn\'t sent!';
    }
  }
  else {
    echo 'All Fields are required';
  }
  return;
}

function send( $name, $message ) {
    $time = date("Y-m-d H:i:s"); 
    $mysqlConnection=mysql_connect("localhost", 'root', '') or die("connect error!");

    mysql_select_db('test') or die ("db error!");  

    $queryStr="INSERT INTO fortest (time, message, name)
    VALUES ( '$time', '$message', '$name')";
    mysql_query($queryStr,$mysqlConnection) or die(mysql_error());
    return true ;
}
?>

这是我引用的网站:http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html我错过了什么吗？

Answer 1

正如一些人已经提到的，您正在尝试序列化整个 dom 对象，这是行不通的。将其更改为 var form = $("#form1") 并且它应该可以工作。

我建议您在 Chrome 开发工具中打开网页，然后单击“网络”选项卡，单击“保留日志”，然后提交表单。提交后，您将看到发送到服务器的完整 header ，并可以验证其是否正常工作以帮助缩小问题范围