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

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.

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

?>

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

通过准确提交,现在我的list.json文件更新了新信息,如下所示:

[
    {
        "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.

现在我想使用AJAX在提交表单后停止重定向。我明白,因为我正在使用action =“saveit.php”它正在重定向到该文件(或者我在该文件中指出的任何地方),但是我没有找到正确使用AJAX来验证和提交没有重定向的表单。

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!

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

1 个解决方案

#1

1. Get rid of the forms action

   摆脱表单动作

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

   使用jQuery(如果你感觉粗体,则使用XMLXTPRequest)

(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

更改HTML按钮

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

发送