将表单数据附加到 json 文件中

Question

我想将表单数据附加到 json 文件中，这是我的代码，但我不确定我做错了什么。每次我通过帖子提交数据时，我只会收到错误响应。这段代码哪里出错了？

HTML

<form class="ajax form-inline">
<div class="form-group">
            <label for="exampleInputAmount">Yo, whats your first name?</label>
            <div class="input-group">
              <input type="text" class="form-control" id="fname" placeholder="First name">
            </div>
          </div>
          <div class="form-group">
            <label for="exampleInputAmount">&& Last name?</label>
            <div class="input-group">
              <input type="text" class="form-control" id="lname" placeholder="Last name">
            </div>
          </div>
          <button type="submit" class="btn btn-primary">Submit to JSON</button>
        </form>

JS/Jquery

  $('form.ajax').on('submit', function(){
      var $fname = $("#fname")
            var $lname = $("#lname")
            var object = {
            firstname: $fname.val(),
            lastname: $lname.val(),
            }

            var params = JSON.stringify(object);


            $.ajax({
              type: 'POST',
              data: params,
              dataType: "json",
              url: 'save_to_json.php',

              success: function(data) {
                  console.log('success');
                },
                error: function(data) {
                  console.log('error');
                },
                complete: function() {
                  console.log('complete');
                }
                });
                return false;
e.preventDefault()
            });

PHP / save_to_json.php

<?php
if (!isset($_POST['params']) && !empty($_POST['params'])) {
     $params = $_POST['params'];

     $jsonObject = json_encode($params);
     file_put_contents('my_json_data.json', $jsonObject, FILE_APPEND);
 }
 else {
   echo "Noooooooob";
 }

 ?>

Answer 1

首先，使用event.preventDefault()方法阻止你的表单被提交。

这是参考：

• event.preventDefault()

其次，在您的代码中使用var params = JSON.stringify(object); 毫无意义。

最后，删除这一行 dataType: "json",，除非您期望一个 json 对象作为来自服务器的响应。 dataType 是您期望从服务器返回的数据类型。

所以你的 jQuery 脚本应该是这样的：

$(document).ready(function(){
    $('form.ajax').on('submit', function(e){
        e.preventDefault();
        var $fname = $("#fname");
        var $lname = $("#lname");
        var params = {
        firstname: $fname.val(),
        lastname: $lname.val(),
        }

        $.ajax({
          type: 'POST',
          data: params,
          url: 'save_to_json.php',

          success: function(data) {
              console.log('success');
            },
            error: function(data) {
              console.log('error');
            },
            complete: function() {
              console.log('complete');
            }
        });
        return false;
    });
});

这就是处理 AJAX 请求的方式，

<?php

    if (isset($_POST['firstname']) && isset($_POST['lastname'])) {
        $params = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);

        $jsonObject = json_encode($params);
        file_put_contents('my_json_data.json', $jsonObject, FILE_APPEND);
    }
    else {
        echo "Noooooooob";
    }

?>

已编辑：

根据您的要求，您应该像这样处理 AJAX 请求：

<?php

    if (isset($_POST['firstname']) && isset($_POST['lastname'])) {
        $params = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);

        $jsonObject = json_encode($params);
        $json = file_get_contents('my_json_data.json');
        if(empty($json)){
            $jsonObject = json_encode(array('username' => [$jsonObject]));
            file_put_contents('my_json_data.json', $jsonObject);
        }else{
            $json = json_decode($json, true);
            $newJson = $json['username'][0] . "," . $jsonObject;
            $jsonObject = json_encode(array('username' => [$newJson]));
            file_put_contents('my_json_data.json', $jsonObject);
        }
    }
    else {
        echo "Noooooooob";
    }

?>