Вывод данных на страницу из базы без перезагрузки при отправке формы

Форум для тех кто начинает осваивать язык php.
albina111484
Сообщения: 31

Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение albina111484 » Пт окт 30, 2015 3:05 pm

Здравствуйте! Помогите, пожалуйста, с заданием.
Есть форма (ФИО, телефон, e-mail):

Код: Выделить всё

<form action="form.php" method="post">   
<
labelФИО:</label><br />
<
input type="text" name="Имя" required="required">
        
<
p><label>Телефон:</label><br />
<
input type="email" name="tel" required="required">

<
p><labelE-mail:</label><br />
<
input type="text" name="mail" id="field3" required="required">

<
p><input type="submit" value="Отправить">
</
form>
 

Есть таблица в БД - form и обработчик form.php

Как сделать, чтобы после нажатия на кнопку "отправить" данные загружались в БД и выводились на странице в таблице без ее перезагрузки? Заранее спасибо!!!)
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение Slash » Пт окт 30, 2015 4:37 pm

Выводить информацию на экран можно не из базы, а взяв переменные из формы, метод POST, AJAX.
Забивать базу данных без перезагрузки можно через тот же AJAX, установив type: 'POST'.
albina111484 писал(а):обработчик form.php

Что в обработчике?
albina111484
Сообщения: 31

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение albina111484 » Пт окт 30, 2015 5:38 pm

Да я сделала AJAX, все получилось, но только с одним полем. Как добавить еще два поля: чтобы выводились id, name, tel, mail? Причем нужно, чтобы они выводились в таблицу со столбцами: №, ФИО, Телефон, E-mail.
У меня есть форма:

Код: Выделить всё

<b>Заполните форму</b>
<div class="content_wrapper">
<ul id="responds">
<?php
//подключаем конфигурационный файл
include_once("config.php");

//MySQL запрос
$Result mysql_query("SELECT id,content FROM add_delete_record");

// получаем все записи из таблицы add_delete_record
while($row mysql_fetch_array($Result))
{
echo 
'<li id="item_'.$row["id"].'">';
echo 
'<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
echo 
'<img src="images/icon_del.gif" border="0" />';
echo 
'</a></div>';
echo 
$row["content"].'</li>';
}

//Закрывает соединение с сервером MySQL
mysql_close($connecDB);
?>

</ul>
<div class="form_style">
<form method="post"> 
ФИО<br />  
<textarea name="content_txt" id="contentText" cols="45" rows="1" required="required"></textarea>
<p>Телефон:<br />
<textarea name="content_txt" id="contentText" cols="45" rows="1" required="required"></textarea>
<p>E-mail:<br />
<textarea name="content_txt" id="contentText" cols="45" rows="1" required="required"></textarea>
<p><input type="submit" id="FormSubmit" value="Отправить">
</form>
</div>
</div>

И скрипт:

Код: Выделить всё

<script>
$(
document).ready(function() {
    
// Добавляем новую запись, когда произошел клик по кнопке
    
$("#FormSubmit").click(function (e) {

        
e.preventDefault();

        if($(
"#contentText").val()===""//simple validation
        
{
            
alert("Не все поля заполнены. Попробуйте еще раз!");
            return 
false;
        }

        var 
myData "content_txt="+ $("#contentText").val(); //post variables

        
jQuery.ajax({
            
type"POST"// HTTP метод  POST или GET
            
url"response.php"//url-адрес, по которому будет отправлен запрос
            
dataType:"text"// Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            
data:myData//данные, которые будут отправлены на сервер (post переменные)
            
success:function(response){
            $(
"#responds").append(response);
            $(
"#contentText").val(''); //очищаем текстовое поле после успешной вставки
            
},
            
error:function (xhrajaxOptionsthrownError){
                
alert(thrownError); //выводим ошибку
            
}
        });
    });

    
//Удаляем запись при клике по крестику
    
$("body").on("click""#responds .del_button", function(e) {
        
e.preventDefault();
        var 
clickedID this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
        
var DbNumberID clickedID[1]; //и получаем номер из массива
        
var myData 'recordToDelete='DbNumberID//выстраиваем  данные для POST

        
jQuery.ajax({
            
type"POST"// HTTP метод  POST или GET
            
url"response.php"//url-адрес, по которому будет отправлен запрос
            
dataType:"text"// Тип данных
            
data:myData//post переменные
            
success:function(response){
            
// в случае успеха, скрываем, выбранный пользователем для удаления, элемент
            
$('#item_'+DbNumberID).fadeOut("slow");
            },
            
error:function (xhrajaxOptionsthrownError){
                
//выводим ошибку
                
alert(thrownError);
            }
        });
    });
});
</script>

И еще есть файл response.php, который возвращает результат в соответствии с запросом пользователя. В response.php протекает добавление записи в БД и возвращается успешный ответ или сообщение с ошибкой.

Добавлено спустя 17 минут 56 секунд:

Код: Выделить всё



<?php
//подключаем конфигурационный файл бд
include_once("config.php");

//проверяем $_POST["content_txt"] на пустое значение
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)
{

    
// очищаем значение переменной, PHP фильтры FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
    // (Удаляют тэги, при необходимости удаляет или кодирует специальные символы)

    
$contentToSave filter_var($_POST["content_txt"]);

    
// Insert sanitize string in record
    
if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))
    {
        
//Record is successfully inserted, respond to ajax request
        
$my_id mysql_insert_id(); //Get ID of last inserted record from MySQL
        
echo '<li id="item_'.$my_id.'">';
        echo 
'<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
        echo 
'<img src="images/icon_del.gif" border="0" />';
        echo 
'</a></div>';
        echo 
$contentToSave.'</li>';
        
mysql_close($connecDB);

    }else{
        
//вывод ошибки

        //header('HTTP/1.1 500 '.mysql_error());
        
header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }

}
elseif(isset(
$_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>&& is_numeric($_POST["recordToDelete"]))
{
//do we have a delete request? $_POST["recordToDelete"]

    // очищаем значение переменной, PHP фильтр FILTER_SANITIZE_NUMBER_INT
    // Удаляет все символы, кроме цифр и знаков плюса и минуса

    
$idToDelete filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT);

    
//try deleting record using the record ID we received from POST
    
if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))
    {
        
//If mysql delete record was unsuccessful, output error
        
header('HTTP/1.1 500 Could not delete record!');
        exit();
    }
    
mysql_close($connecDB);

}else{

    
//Output error
    
header('HTTP/1.1 500 Error occurred, Could not process request!');
    exit();
}
?>
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение Slash » Пт окт 30, 2015 5:59 pm

Кое что написал, взяв вашу форму из первого поста. Исправил пару ошибок:

Код: Выделить всё

<form action="" id="ajax_form" method="POST">   
<label> ФИО:</label><br />
<
input type="text" name="name" required="required">
        
<p><label>Телефон:</label><br />
<
input type="text" name="tel" required="required">

<
p><label> E-mail:</label><br />
<
input type="email" name="mail" id="field3" required="required">

<
p><input type="button" onClick="mode('ajax_form');" value="Отправить">
</
form>

Между тегами <head> и </head> вставляем:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

После <body>:

Код: Выделить всё

<script type="text/javascript">
    function mode(ajax_form)
    { 
        
$.ajax({ 
            url
: 'ajax.php', // Название файла обработчика
            type: 'POST',
            data: jQuery('#ajax_form').serialize(),  
            success
: function(data) 
            
{
                $('#display').html(data);
            }
        }); 
    
}
</script>

И файл обработчик:

Код: Выделить всё

<?php
$name 
= trim($_POST['name']);
$tel = trim($_POST['tel']);
$mail = trim($_POST['mail']);

if (isset($name) and isset($tel) and isset($mail))
{
    echo $name . '<br />';
    echo $tel . '<br />';    
    echo $mail 
. '<br />';
    
    
/* 
        Тут можно делать все что угодно с этими переменными.
        Например добавить в БД.
    */
}
else
{
    echo 'Произошла ошибка.';
}

Там, где надо выводить введенную информацию, вставте:

Код: Выделить всё

<div id="display"></div>

Хочу сказать, что я не рекомендую использовать названия переменных с русскими буквами.
albina111484
Сообщения: 31

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение albina111484 » Пт окт 30, 2015 7:20 pm

А можно сделать так, чтобы записи сначала добавлялись в базу, а затем на страницу, чтобы при перезагрузки записи не исчезали?
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение Slash » Пт окт 30, 2015 7:37 pm

albina111484 писал(а):при перезагрузки записи не исчезали

Первое, что пришло в голову создать сессию для пользователя, который ввел данные, и при перезагрузке проверять данные в базе данных (сравнивать с сессией), если все верно, то выводить информацию на экран.

Такой же вариант, но не с сессией, а с IP пользователя.
albina111484
Сообщения: 31

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение albina111484 » Сб окт 31, 2015 2:33 am

Спасибо, с вашей помощью все получилось! ;)
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Вывод данных на страницу из базы без перезагрузки при отправке формы

Сообщение Slash » Сб окт 31, 2015 7:19 am

Всегда пожалуйста!
Зовите если что, буду рад помочь.

Вернуться в «PHP»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость