Я хочу хранить комментарии от пользователей в моей базе данных. Когда пользователь отправляется, я не хочу перенаправлять их на новую страницу. У меня есть следующий код, но он не работает.
Мой 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("Ymd"); 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
Пробовал разные вещи, но не мог понять. Кто-нибудь может мне помочь? Заранее спасибо!
Форма отправляет и не остается на одной странице из-за атрибута действия в форме и обычной кнопки отправки.
Это приводит к вашему .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() чтобы поля формы были установлены как json-строка в переменную POST [toDB].
Итак, на вашем PHP вы бы сделали:
$datas = json_decode( $_POST['toDB'], true );
И теперь ваша переменная $datas является ассоциативным массивом, содержащим все ваши имена и значения полей формы. Я не на 100% в этом следующем утверждении, но вам может понадобиться использовать метод stripslashes() PHP для данных POSTED до использования json_decode()
то есть:
//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("Ymd"); 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();
надеюсь, это поможет
Сделайте это через форму отправить событие
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 в некоторых случаях для доступа к вашим данным post $GLOBALS['HTTP_RAW_POST_DATA']
Добавить return false в конце скрипта, чтобы предотвратить перенаправление