在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开发工具中打开网页，然后点击“网络”标签，点击保存日志，然后提交表单。 提交后，您将看到发送到服务器的完整标头，并可以验证它是否可以正常工作以帮助缩小问题范围。