javascript - 使用 AJAX 提交表单并将数据以 JSON 形式发送到文件

Question

我已经尝试解决这个问题有一段时间了。我想提交一个表单并将其数据作为 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>

saveit.php

<?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;

?>

通过准确提交，现在我的 list.json 文件已使用新信息进行更新，如下所示:

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

现在我想使用 AJAX 来阻止表单提交后发生重定向。我明白，因为我正在使用 action="saveit.php" 它正在重定向到该文件(或我在该文件中指出的任何位置)，但我无法找到正确的用途AJAX 来验证并提交表单而无需重定向。

我发现了大量用于停止重定向的 AJAX 代码示例，但没有一个让我在提交后继续将新数据存储到 list.json 中，这就是问题所在。请帮忙! 谢谢!

Answer 1

1. 摆脱表格 action

2. 使用 jQuery(如果您胆子大的话，可以使用 XMLHTTPRequest)

(将其弹出 <script> 标签)

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
  })
}

更改 HTML button

<button class="btn btn-primary" onclick='ajaxSubmit()'>Send</button>