使用Ajax插入Mysql表單php中而無需重新加載頁面

Question

我有將此jQuery AJAX代碼轉換為Mysql形式的php。 它無需重新加載頁面即可工作。 問題是，當用戶在表單中輸入內容，然后單擊提交時，我想使用php和ajax（帶有jquery）。 但是它不會在alert（）中打印字符串。 有人可以告訴我如何實現嗎？

HTML：

<form id="students" method="post">
   <div class="row">
      <input name="a[]" value="" type="text" >
      <input name="b[]" value="" type="text"  >
   </div>
   <div class="row">
      <input name="a[]" value="" type="text" >
      <input name="b[]" value="" type="text"  >
   </div>
   <input type="submit" value="submit" id="submitbutton" class="insert"/>
</form>


<script type="text/javascript">
 $('#students').submit(function(){
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax_insert.php',
      data: $('#students').serialize(),
      dataType: 'JSON',
      success: function(data) {
          alert('form has been posted successfully');
      }
    });
 });
</script>

和ajax_insert.php：

$a1=$_POST['a'];
$b1=$_POST['b'];

//$query_values = array();
$index=0;

foreach($a1 as $s){
   $sql = "INSERT INTO test_data(a,b) VALUES('$s','".$b1[$index]."')";

   $result = mysql_query($sql);
   if($result)
   {
     echo "1";
   }
   $index++;
}

Answer 1

$('#students').submit(function(event){
    event.preventDefault();
    $.ajax({
    type: 'POST',
    url: 'ajax_insert.php',
    data: $('#students').serialize(),
    dataType: 'JSON',
    success: function(data) {
    alert('form has been posted successfully');
  }
 });

在此處查看官方文檔，了解如何使用event.preventDefault();

Answer 2

您可能需要event.preventDefault(); 在Submit事件回調中：

$('#students').submit(function(){
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'ajax_insert.php',
    data: $('#students').serialize(),
    dataType: 'JSON',
    success: function(data) {
      alert('form has been posted successfully');
    }
  });
});

Answer 3

在$ .ajax調用中使用dataType：“ json”時，您需要返回有效的json

或者，您可以使用dataType：“ html”而不用重寫php代碼

更新（代碼示例，應該可以）：

在HTML中：

<script type="text/javascript">
  $('#students').submit(function(e){
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax_insert.php',
      data: $('#students').serialize(),
      dataType: 'JSON',
      success: function(data) {
          if(data.result == 1) {
              alert('form has been posted successfully');
          } else {
              alert(data.error);
          }
      }
    });
 });
</script>

ajax_insert.php

$a1=$_POST['a'];
$b1=$_POST['b'];

//$query_values = array();
$index=0;
$errors = array();

foreach($a1 as $s){
   $sql = "INSERT INTO test_data(a,b) VALUES('$s','".$b1[$index]."')";

   $result = mysql_query($sql);
   if(!$result)
   {
     $errors[] = "\"$sql\"";
   }
   $index++;
}

if(!empty($errors)) {
   echo json_encode(array('result'=>0,'error'=>"Error executing following queries: \n".implode("\n", $errors)));
} else {
   echo json_encode(array('result'=>1));
}