提交ajax表单并停留在同一页面上不起作用
Posted
技术标签:
【中文标题】提交ajax表单并停留在同一页面上不起作用【英文标题】：Submit ajax form and stay on same page not working 【发布时间】：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>
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 所依赖的。
【参考方案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 以防止重定向
【讨论】：
以上是关于提交ajax表单并停留在同一页面上不起作用的主要内容，如果未能解决你的问题，请参考以下文章