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

Question

I've been trying to figure this out for a while now. I want to submit a form and store its data in a file as JSON. I've got to find part of the solution, using PHP to store the data into a file, but now I want to avoid redirection after the form is submitted.

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;

?>

By submitting exactly at it is right now my list.json file is updated with new information, as seen below:

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

Now I want to stop the redirection from happening after the form is submitted, using AJAX. I understand that because I'm using action="saveit.php" it is redirecting to that file (or to wherever I pointed out in that file), but I'm failing to find the proper use of AJAX to validate and submit the form without redirection.

I've found tons of examples of AJAX code to stop redirection, but none of them let me keep storing new data into list.json after submission, and that's the problem. Please, help! Thank you!

Answer 1

1. Get rid of the forms action

2. Using jQuery (orXMLHTTPRequest if you are feeling bold)

(pop it in a <script> tag)

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

3. change HTML button

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