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 =＆＃34; saveit.php＆＃34; ，它会重定向到该文件（或者我在该文件中指出的任何地方），但是我＆＃ 39; m未能找到正确使用AJAX来验证和提交表单而无需重定向。

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

Answer 1

摆脱表格action
使用jQuery（如果你感觉大胆的话，还是XMLXTPRequest）

（将其弹出<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>

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

1 个答案: