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

Форум для тех кто начинает осваивать язык php.
albina111484
Сообщения: 31
Зарегистрирован: Сб апр 25, 2015 12:07 pm

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

Сообщение 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><label> E-mail:</label><br />
<input type="text" name="mail" id="field3" required="required">

<p><input type="submit" value="Отправить">
</form>
 
Есть таблица в БД - form и обработчик form.php

Как сделать, чтобы после нажатия на кнопку "отправить" данные загружались в БД и выводились на странице в таблице без ее перезагрузки? Заранее спасибо!!!)

Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2112
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 71 раз

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

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

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

albina111484
Сообщения: 31
Зарегистрирован: Сб апр 25, 2015 12:07 pm

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 (xhr, ajaxOptions, thrownError){
                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 (xhr, ajaxOptions, thrownError){
                //выводим ошибку
                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"])>0 && 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
Администратор
Сообщения: 2112
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 71 раз

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
Зарегистрирован: Сб апр 25, 2015 12:07 pm

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

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

А можно сделать так, чтобы записи сначала добавлялись в базу, а затем на страницу, чтобы при перезагрузки записи не исчезали?

Аватара пользователя
Slash
Администратор
Сообщения: 2112
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 71 раз

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

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

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

Такой же вариант, но не с сессией, а с IP пользователя.

albina111484
Сообщения: 31
Зарегистрирован: Сб апр 25, 2015 12:07 pm

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

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

Спасибо, с вашей помощью все получилось! ;)

Аватара пользователя
Slash
Администратор
Сообщения: 2112
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 71 раз

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

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

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

Ответить Пред. темаСлед. тема

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

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