Javascript 使用AJAX提交表单并将数据作为JSON发送到文件

我想弄清楚这件事已经有一段时间了。我想提交一个表单，并将其数据作为JSON存储在一个文件中。我必须找到解决方案的一部分，使用PHP将数据存储到文件中，但现在我想避免表单提交后的重定向

HTML

<form action="saveit.php" method="POST">
    <div class="form-group" id="vaga-group">
        <label for="vaga">Job</label>
        <input type="text" class="form-control" id="vaga" name="vaga" placeholder="Ex.: UX Designer, Desenvolvedor Java">
    </div>
    <div class="form-group" id="cidade-group">
        <label for="cidade">City</label>
        <input type="text" class="form-control" id="cidade" name="cidade" placeholder="Ex. São Paulo">
    </div>
    <div class="form-group" id="tipo-group">
        <label for="tipo">Type</label>
        <select class="form-control" name="tipo" id="tipo">
            <option>Full time</option>
            <option>Freelance</option>
        </select>
    </div>  
    <button class="btn btn-primary" type="submit">Send</button>
</form>

现在我想使用AJAX阻止表单提交后发生重定向。我理解这一点，因为我正在使用action=“saveit.php”它正在重定向到该文件（或我在该文件中指出的任何地方），但我没有找到正确使用AJAX验证和提交表单而不重定向的方法

我已经找到了很多AJAX代码停止重定向的例子，但没有一个能让我在提交后继续将新数据存储到list.json中，这就是问题所在。求求你，救命！ 谢谢大家!

摆脱表单

操作

使用jQuery（如果您觉得粗体，则使用xmlhttprequest）

（在

标签中弹出）

更改HTML

按钮

---

Send

您在这里没有找到答案吗？我敢肯定这已经被问到了…@Daenu我没有。正如我所说，我发现了许多AJAX示例，展示了如何停止重定向，但我没有将数据一直存储到list.json中。这就是问题所在！因此，要么通过Ajax提交表单并取消提交，要么将.php重定向回您所在的页面。当通过Ajax提交数据时，PHP代码不应该有任何不同。@epascarello所以这些是唯一的选项？使用Ajax，我将无法更新list.json，我将不得不坚持只提交a.php？不，使用Ajax，它不会无法更新列表。。。php是Ajax调用时也一样。见鬼，php根本不知道它来自Ajax调用。使用Ajax，您需要序列化表单字段，向上发送值，然后取消表单提交。

<?php
    $filetxt = 'js/list.json';

    $formdata = array(
        'vaga'=> $_POST['vaga'],
        'cidade'=> $_POST['cidade'],
        'tipo'=> $_POST['tipo']
    );

    $arr_data = array();  
    $jsondata = file_get_contents($filetxt);
    $arr_data = json_decode($jsondata, true);
    $arr_data[] = $formdata;
    $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);
    file_put_contents('js/list.json', $jsondata);

    $form_state['redirect'] = false;

?>

[
    {
        "vaga": "Desenvolvedor Front-End",
        "cidade": "New York",
        "tipo": "Freelance"
    },
    {
        "vaga": "Desenvolvedor Java",
        "cidade": "Chicago",
        "tipo": "Freelance"
    }
]

function ajaxSubmit(){
  $.post('saveit.php', {
    vaga: document.getElementById('vaga').value,      // all the values you
    cidade: document.getElementById('cidade').value,  // want to send
    // and so on ...
  }).done(function(result){
    // result = server result
    // do what you must to notify client here
  }).fail(function(err){
    // oh dear ... error. tell user
  })
}