通过 AJAX 从 localStorage 发送数据到 PHP 并保存在 HTML 文件中

Posted 2023-02-24

【中文标题】通过 AJAX 从 localStorage 发送数据到 PHP 并保存在 HTML 文件中

【英文标题】：Send data from localStorage via AJAX to PHP and save it in an HTML file

【发布时间】：2014-02-15 16:51:27

【问题描述】：

我想通过 AJAX 将表单中的字段数据发送到文件，我在网上找到了这个解决方案：http://techglimpse.com/pass-localstorage-data-php-ajax-jquery/

唯一的问题是我有多个字段而不是单个字段，我想将输出 (localStorage) 保存在 html（或任何其他格式）文件中，而不是在 #output div 中显示。

我该怎么做？

你可以在这里看到我到目前为止所做的工作：Save form data using AJAX to PHP

这是我的 HTML/JS 代码：http://jsbin.com/iSorEYu/1/edit & PHP 代码http://jsbin.com/OGIbEDuX/1/edit

【问题讨论】：

请提供jsfiddle

jsbin.com/iSorEYu/1/edit & jsbin.com/OGIbEDuX/1/edit

【参考方案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 数据，请将 PHP 代码中 your_data 文件的文件格式替换为 html。

【参考方案2】：

你把事情复杂化了。对 localStorage 的检查可以更简单 (other options)。 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)  ;  

【讨论】：

没关系，但我想将字段保存在同一服务器上的文件中，而不是在 div 上输出。您会注意到 html 表单也使用 eloqua 脚本将数据发送到另一台服务器。所以我在这里想要实现的是使用他们的脚本将数据发送到 eloqua，并为我的目的保存数据。可能吗？

我更新了代码，不确定您到底想要存档什么，但只需将数据保存到文件中，可以使用file_put_contents

对。所以我更新了我的代码，但它没有做任何事情。在此处查看最新代码：jsbin.com/iSorEYu/4/edit & PHP：jsbin.com/OGIbEDuX/2/edit 另一件事是，在我使用您的代码后，表单停止向其他服务器发布数据。在此处查看实时版本：hackingarticles.com/marketer

请注意您的代码。你的 太多了。服务器响应错误 500 - Internal Server Error，这意味着您的代码中有错误。可能是上面提到的那个。

我的更新代码好运吗？非常感谢您的帮助。