Daten von localstorage über AJAX PHP senden und es in einer HTML-Datei

Question

ich von einem Formulardaten wollen in einer Datei speichern über AJAX Felder senden und ich diese Lösung online gefunden: http://techglimpse.com/pass-localstorage-data-php-ajax-jquery/

Das einzige Problem ist, dass ich habe mehrere Felder anstelle eines einzelnen Felds und möchte die Ausgabe (localStorage) in einer HTML-Datei (oder einem anderen Format) speichern, anstatt sie in einem #Ausgabediv anzuzeigen.

Wie kann ich das tun?

Sie können meine Arbeit sehen, die ich bis jetzt hier gemacht habe: Save form data using AJAX to PHP

Und hier ist mein HTML/JS-Code: http://jsbin.com/iSorEYu/1/edit & Code 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> 

HINWEIS: Ersetzen Sie das Dateiformat von your_data Datei im PHP-Code in HTML, wenn Sie in HTML Ihre JSON-Daten wollen Format.

Answer 2

Sie Dinge overcomplocating. Die Prüfung auf localStorage kann viel einfacher sein (other options). jQuery hat eine serialze() Funktion, die alle Formularelemente übernimmt und serialisiert. Sie können sie unter "eloqua-fields" speichern, damit Sie sie wiederfinden können. Es ist nicht nötig, etwas ausgefallenes zufälliges Retralisieren durchzuführen.

Ich möchte hinzufügen, dass nicht alle von Ihnen Code sinnvoll ist. Warum sollten Sie localstorage verwenden, wenn Sie es jedes Mal löschen, wenn das DOM bereit ist? Ihre Validierung bricht den Sendevorgang nicht ab, wenn es Fehler gibt, aber ich nehme an, Sie möchten nur mit etwas herumspielen.

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

Für den Server Teil, wenn Sie nur Ihre Daten irgendwo speichern möchten.

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