提交ajax表单并停留在同一页面上不起作用答案

【问题标题】：Submit ajax form and stay on same page not working提交ajax表单并停留在同一页面上不起作用
【发布时间】：2015-08-14 02:42:02
【问题描述】：

我想将来自用户的 cmets 存储在我的数据库中。当用户提交时，我不想将他们重定向到新页面。我有以下代码，但它不起作用。

我的 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

尝试了不同的东西，但无法弄清楚。有人可以帮我吗？提前致谢！

【问题讨论】：

把var frm = $('#formA');放在$(document).submit(function(e) {旁边，请检查一次。
$dataA 应进行消毒以防止注射。 php.net/manual/en/function.mysql-real-escape-string.php 还要注意mysql_，应该使用mysqli 或pdo，然后你可以使用prepared statements。如果你给datum 一个默认时间戳，你就不必每次都插入日期。还有 DEFAULT 我以前没见过，但如果你有自动递增的字段，你不需要发送它。
感谢您的快速响应，但不幸的是它仍然无法正常工作。这些变化没有任何区别。
你加载了jquery.min.js 吗？
检查您的 xhr 请求包含哪些发布数据。我用.serialize() 做了一个快速测试，它没有包含提交按钮的键或值，这是你的PHP 所依赖的。

标签： javascript php html mysql ajax

【解决方案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() 调用中修改了“数据”的设置，以便将表单字段设置为 POST 变量 [toDB] 的 json 字符串。

所以在你的 PHP 中你会这样做：

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

现在您的$datas 变量是一个关联数组，其中包含您所有的表单字段名称和值。我不是 100% 同意下一个声明，但您可能需要在使用 json_decode() 之前对 POSTED 数据使用 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();

希望有帮助

【讨论】：

使用此代码，我的控制台中出现错误：此对象不支持 Stringnify 属性或方法
它应该是JSON.stringify()，我打错了。它已修复，现在也带有 jsfiddle 链接。
谢谢，它确实保留在同一页面上，但我的数据库中没有插入任何内容。我不明白。这几天我一直在努力解决这个问题！
是的，使用此解决方案 - 我进行了编辑，以便您可以从 PHP 访问发布的数据...请参阅上面的编辑，这应该可以为您解决问题。
耶啊啊啊啊！有用！太感谢了！我自己永远无法解决这个问题。

【解决方案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/

尝试使用大写/小写POST，如果不需要，请尝试删除multipart/form-data（文件上传等...）

EDIT3 使用多部分形式，也许你应该在某些情况下在 PHP 中使用它来访问你的帖子数据$GLOBALS['HTTP_RAW_POST_DATA']

【讨论】：

感谢您的帮助，但没有区别。仍然遇到同样的问题。
用控制台看一些错误，说不定会有答案
试试我的edit2块并检查那个url，希望能给你答案
解决此问题的最佳解决方案是执行 print_r($_POST);exit;在 test.php 文件的顶部。然后在你的 jquery 类型 console.log(html) 的成功函数中，看看你得到的输出是应该发布的数据吗？
我迷失在所有的编辑中。你在哪里使用我的 PHP 中的 $GLOBALS['HTTP_RAW_POST_DATA'] 。在第二次编辑中，您建议进行一些修改，这是否意味着替换 var formData = $(this).serialize(); with var formData = new FormData(this);

【解决方案3】：

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

【讨论】：