Отправьте данные из localStorage через AJAX на PHP и сохраните их в HTML-файле

Я хочу отправить данные полей из формы в файл через AJAX, и я нашел это решение в интернете:http://techglimpse.com/pass-localstorage-data-php-ajax-jquery/

единственная проблема в том, что у меня есть несколько полей вместо одного поля, и я хочу сохранить вывод (localStorage) в файле HTML (или любом другом формате) вместо того, чтобы показывать его в #output div.

Как я могу это сделать?

вы можете увидеть мою работу, которую я сделал до сих пор здесь: сохранить данные формы с помощью AJAX в PHP

и вот мой HTML / JS код:http://jsbin.com/iSorEYu/1/edit & PHP код http://jsbin.com/OGIbEDuX/1/edit

9
ajax forms jquery local-storage php

2 ответов

PHP:

<h1>Below is the data retrieved from SERVER</h1>
<?php
    date_default_timezone_set('America/Chicago'); // CDT
    echo '<h2>Server Timezone : ' . date_default_timezone_get() . '</h2>';
    $current_date = date('d/m/Y == H:i:s ');
    print "<h2>Server Time : " . $current_date . "</h2>";

    $dataObject = $_POST; //Fetching all posts

    echo "<pre>"; //making the dump look nice in html.
    var_dump($dataObject);
    echo "</pre>";

        //Writes it as json to the file, you can transform it any way you want
    $json = json_encode($dataObject);
    file_put_contents('your_data.txt', $json);
?>

JS:

<script type="text/javascript">
$(document).ready(function(){
localStorage.clear();

$("form").on("submit", function() {
    if(window.localStorage!==undefined) {
        var fields = $(this).serialize();

        localStorage.setItem("eloqua-fields", JSON.stringify( fields ));
        alert("Stored Succesfully");
        $(this).find("input[type=text]").val("");
        alert("Now Passing stored data to Server through AJAX jQuery");
        $.ajax({
           type: "POST",
           url: "backend.php",         
           data: fields,
           success: function(data) {
              $('#output').html(data);
           }
        });
    } else {
        alert("Storage Failed. Try refreshing");
    }
});
});
</script>

Примечание: замените формат файла your_data на html в PHP-коде, если вам нужны данные JSON в формате HTML.

7

вы overcomplocating вещи. Проверка localStorage может быть проще (другие функции). jQuery имеет serialze() функция, которая принимает все элементы формы и сериализует ее. Вы можете хранить их под "eloqua-полями", чтобы вы могли найти его снова. Нет необходимости делать какой-то причудливый случайный retrival.

Я бы хотел добавить, что не все из вас код имеет смысл. Зачем использовать localstorage, если вы очищаете его каждый раз, когда DOM готов? Проверка не прерывает процесс отправки если есть ошибки, но я предполагаю, что вы просто хотите поиграть с вещами.

$(document).ready(function(){
    localStorage.clear();

    $("form").on("submit", function() {
        if(window.localStorage!==undefined) {
            var fields = $(this).serialize();

            localStorage.setItem("eloqua-fields", JSON.stringify( fields ));
            alert("Stored Succesfully");
            $(this).find("input").val(""); //this ONLY clears input fields, you also need to reset other fields like select boxes,...
            alert("Now Passing stored data to Server through AJAX jQuery");
            $.ajax({
               type: "POST",
               url: "backend.php",
               data: {data: fields},
               success: function(data) {
                  $('#output').html(data);
               }
            });
        } else {
            alert("Storage Failed. Try refreshing");
        }
    });
});

для серверной части, если вы просто хотите сохранить свои данные где-нибудь.

$dataObject = $_POST['data'];
$json = json_decode($dataObject);
file_put_contents('your_data.txt', $json)  ;
5