jQuery forms.js с несколькими формами на странице

Question

Я хотел бы отправить информацию в базу данных mySql, используя php и ajax.

Страница, с которой отправляется информация (form.php), имеет несколько форм, сгенерированных из цикла while ().

В случае успеха я получу ответ для обновления div над конкретной формой, из которой были отправлены данные.

В настоящее время я использую jQuery и плагин jquery form .

Мне удалось доставить данные в базу данных, однако у меня возникли проблемы с отправкой ответа обратно в соответствующий div. Я успешно получил ответ обратно на div, который находится за пределами цикла while (). Однако мне не удалось получить ответ обратно на div в цикле. Я поместил в код ниже div с именем: «> Где я хотел бы разместить записку.

Я знаю, что это связано с моей функцией JavaScript:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('form').ajaxForm({
        target: '#noteReturn',
        success: function() { $('#noteReturn').fadeIn('slow'); }
    });
});
</script>

Функция #noteReturn не указывает, в каких подразделениях она должна быть размещена.

Я надеюсь, что это имеет смысл.

Спасибо за вашу помощь.

код ниже:

<!-- the form.php page -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    success: function() { 
    $('#noteReturn').fadeIn('slow'); } 
    }); 
});
</script>  
<?php
$query = mysql_query("SELECT * FROM businesses");
while( $row = mysql_fetch_assoc( $query ) ):
    $b_id = $row['bid'];
?>

<div class='notes'> 

<?php  
// query the db for notes associated with business... return notes texts and notes dates
$notesQuery = mysql_query("SELECT business_id, notes, messageDate FROM notes WHERE notes.business_id = $b_id ORDER BY messageDate");
while( $NoteRow = mysql_fetch_assoc( $notesQuery ) ) { 
extract($NoteRow); 
echo "$notes<br/><span class='noteDate'>$messageDate</span><br />"; 
}  // end while$notesQuery
?> 
<!-- this is where i would like jQuery to return the new note -->
<div id="noteReturn<?php echo $b_id; ?>"></div> 

<!-- begin note form -->
<form name="noteForm" action="notesProcess.php" method="post">
    <input type="text"  name="note" />
    <input type="hidden" value="<?php echo $b_id ?>" name="bid" />
    <input type="submit" class="button"  value="Send" />
</form>

</div> <!-- end div.notes --> 
<?php
endwhile;
?> 

<!-- /////////////////////////////////////////////////////
The page that the form submits to is this (notesProcess.php): 
///////////////////////////////////////////////////// -->
<?php
$note = $_POST['note'];
$id = $_POST['bid'];
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if( $result ) {
echo " $note"; }
?>

Answer 1

Изменить этот код:

jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    success: function() { 
        $('#noteReturn').fadeIn('slow');
    } 
});

К этому:

jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    dataType: 'json',
    success: function(data) { 
        $('#noteReturn' + data.id).html(data.note).fadeIn('slow');
    } 
});

И этот код:

<?php
$note = $_POST['note'];
$id = $_POST['bid'];
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if($result) {
    echo " $note";
}
?>

К этому:

<?php
$note = mysql_real_escape_string($_POST['note']);
$id = mysql_real_escape_string($_POST['bid']);
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if($result) {
    print json_encode(array("id" => $id, "note" => $note));
}
?>

Что случилось?

Изменение в коде PHP использует функцию PHP json_encode для вывода идентификатора предприятия, к которому была добавлена ​​заметка, а также фактический текст заметки. В коде javascript я добавил dataType из 'json', чтобы сообщить сценарию, какой формат ответа ожидать. Как только запрос получен в обратном вызове success, переменная data является объектом со значениями, которые мы передали через json_encode. Таким образом, data.id имеет бизнес-идентификатор, а data.note имеет новую заметку. Используя функцию манипуляции html() в jQuery, внутренний HTML-код div обновляется до последней заметки. Селектор div использует переданный нами идентификатор, поэтому мы можем обновить соответствующий div.

Кроме того, это немного не по теме, но убедитесь, что вы всегда используете mysql_real_escape_string при вводе значений в запрос, как вы. Если вы не используете это, ваши запросы будут уязвимы и подвержены атакам с использованием инъекций, и они не будут красивыми. Если клиент решил ввести значение примечания ');DROP TABLE businesses;, вы действительно почувствуете боль. Желательно переключиться на PDO или MySQLi и использовать prepared statements, поскольку в настоящее время они являются «правильным» способом выполнения запросов.