提交ajax表單並保持同一頁面不起作用

Question

我想在我的數據庫中存儲用戶的評論。 當用戶提交時，我不想將它們重定向到新頁面。 我有以下代碼，但它不起作用。

我的HTML代碼：

<form id="formA" action="test.php" method="post" enctype="multipart/form-data">
<input id="commentData" name="commentData" type="text" >'
<input type="submit" value="toDb" id="toDB" name="toDB" /></form>

使用Javascript：

var frm = $('#formA');

$(document).submit(function(e) {
e.preventDefault();

$.ajax({

    url: frm.attr('action'),

    type: frm.attr('method'),

    data: frm.serialize(),

    success: function(html) {

        alert('ok');

    }

});
});

這是我的PHP文件：

//Connect to database server
mysql_connect("localhost", "user", "") or die (mysql_error ());
mysql_select_db("test") or die(mysql_error());
$strSQL = "SELECT * FROM comments order by RAND() LIMIT 5";
$rs = mysql_query($strSQL);

if (!$rs) {
     echo 'Could not run query ' . mysql_error();
     exit;
}

$dt1=date("Y-m-d");

if(isset($_POST['toDB'])){
  $dataA = $_POST['commentData'];
  $sql = "INSERT INTO comments(id, comment, datum)VALUES(DEFAULT,'$dataA', '$dt1')";
  $result=mysql_query($sql);
}
mysql_close();

當我單擊提交按鈕時，它將保持在同一頁面上並顯示警報，但輸入字段的數據未插入到我的數據庫中。 當我刪除e.preventDefault（）時，數據進入數據庫，但頁面重定向到test.php

嘗試了不同的事情，但無法弄清楚。 有人可以幫我嗎？ 提前致謝！

Answer 1

由於表單上的action屬性和正常的提交按鈕，表單提交並且不會保留在同一頁面上。

這導致您的.submit()方法，包括.preventDefault()可能在加載html后沒有被解釋。

你可以做一些事情：

<html>
  ...
  <body>
  ...
    <form id="formA" action="test.php" method="post" enctype="multipart/form-data">
      <input id="commentData" name="commentData" type="text" />
      <input type="submit" value="toDb" id="toDB" name="toDB" />
    </form>
  ...
  </body>
  <script>
   ...script here...
  </script>
 </html>

而javascript可能是這樣的：

( function( $ )
  {
    var submit = $( 'input[id=toDB]' );
    $( submit ).on
    (
      'click',
      function( event )
      {
        event.preventDefault();
        var form = $( this ).parent();

        // Get form fields
        var data = $( form ).serializeArray(), obj = {}, j = 0;
        for( var i = 0; i < data.length; i++ )
        {
          if( data[i].name in obj )                                                                  
          {
            var key = data[i].name + '_' + j;
            obj[key] = data[i].value;
            j++;
          }
          else
          {
            obj[data[i].name] = data[i].value;
          }
        };

        // Make AJAX request
        $.ajax
        (
          {   
            url: $( form ).attr( 'action' ),    
            type: 'POST',
            data: 'toDB=' + JSON.stringify( obj ),    
            success: function( data, textStatus, xhr )
            {
              // Do something with data?
              ...    
              alert( 'ok' );    
            }
          }
        );
      }
    );
  }( jQuery )
);

親自看看jsfiddle 。

你可以告訴它是否正常工作，因為你得到一個控制台錯誤，找不到請求目的地 - 404 - 盡管頁面沒有刷新，你仍然保持在你所在的位置......有一個適當的頁面可以提交給它完全正常工作。

編輯

我修改了ajax()調用中'data'的設置，以便將表單字段設置為POST變量[toDB]的json字符串。

所以在PHP中你會這樣做：

$datas = json_decode( $_POST['toDB'], true );

現在，您的$datas變量是一個包含所有表單字段名稱和值的關聯數組。 我不是100％在下一個語句，但你可能需要在使用json_decode()之前對json_decode()數據使用PHP的stripslashes()方法

即：

//Connect to database server
mysql_connect( "localhost", "user", "" ) or die ( mysql_error() );
mysql_select_db( "test" ) or die( mysql_error() );
$strSQL = "SELECT * FROM comments order by RAND() LIMIT 5";
$rs = mysql_query( $strSQL );

if( !$rs ) 
{
  echo 'Could not run query ' . mysql_error();
  exit;
}

$dt1=date("Y-m-d");

if( isset( $_POST['toDB'] ) )
{
  $datas = json_decode( stripslashes( $_POST['toDB'] ), true );
  $dataA = $datas['commentData'];
  $sql = "INSERT INTO comments( id, comment, datum )VALUES( DEFAULT, '" . $dataA . "', '" . $dt1 . "' );";
  $result=mysql_query( $sql );
}
mysql_close();

希望有所幫助

Answer 2

通過表單提交活動來完成

var frm = $('#formA');
frm.submit(function(e) {
  //....
  //....
  e.preventDefault();
});

是的，使用mysql_real_escape_string($dataA)清理數據庫插入以防止SQL注入。

編輯對不起，答案不全（仍然需要在表單上使用提交，而不是在文檔上）

EDIT2 :)錯誤使用$（this）:)

$('#formA').submit(function(e) {  
  var formAction = $(this).attr('action');
  var formData = $(this).serialize();
  $.ajax({   
    url: formAction,    
    type: 'POST',     // try uppercase, 'post' !== 'POST', dont know if this must be uppercase or can be lowercase
    data: formData, // or try  $(this).serializeArray()    
    success: function(html) {    
        alert('ok');    
    })
  });
  e.preventDefault();
});

EDIT2.5 ： enctype="multipart/form-data"可能存在問題需要進行一些修改： var formData = new FormData(this); 並為AJAX調用添加一些選項

mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false

發現此頁面的示例http://hayageek.com/jquery-ajax-form-submit/

嘗試UPPERCASE /小寫POST ，然后嘗試刪除multipart/form-data如果你不需要它（文件上傳等...）

EDIT3與多部分形式，也許您應該在PHP中使用它在某些情況下訪問您的發布數據$GLOBALS['HTTP_RAW_POST_DATA']

Answer 3

在腳本末尾添加return false以防止重定向

提交ajax表單並保持同一頁面不起作用

問題描述

3 個解決方案

解決方案1
2 已采納 2015-05-31 18:17:14

解決方案2
0 2015-05-31 17:24:40

解決方案3
0 2015-06-01 05:38:32

提交ajax表單並保持同一頁面不起作用

問題描述

3 個解決方案

解決方案1 2 已采納 2015-05-31 18:17:14

解決方案2 0 2015-05-31 17:24:40

解決方案3 0 2015-06-01 05:38:32

解決方案1
2 已采納 2015-05-31 18:17:14

解決方案2
0 2015-05-31 17:24:40

解決方案3
0 2015-06-01 05:38:32