通過AJAX將數據從localStorage發送到PHP並將其保存在HTML文件中

Question

我想通過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

Answer 1

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>

注意：如果您想要HTML格式的JSON數據，請將your_data文件的文件格式替換為PHP代碼中的html。

Answer 2

你是在過度整合事物。 對localStorage的檢查可以更簡單（ 其他選項 ）。 jQuery有一個serialze()函數，它接受所有表單元素並將其序列化。 您可以將它們存儲在“eloqua-fields”下，以便您可以再次找到它。 不需要做一些花哨的隨機反擊。

我想補充一點，並非所有代碼都有意義。 如果在每次DOM准備就緒時清除它，為什么要使用localstorage？ 如果有錯誤，您的驗證不會中止發送過程，但我認為您只是想玩一些東西。

$(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)  ;