Json对Ajax的回应

Question

The data is inserted and i receive in console the json response but the page move for the insert php and gives the json response So i start in page A (form) and after submit moves to page B (insert)giving me the json response. I'm having a problem getting the response of the following php into ajax

if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {

$target_path = "/uploads/" . basename($_FILES['fileToUpload']['name']);
$sql = "INSERT INTO `ebspma_paad_ebspma`.`formacoes`(idescola, nome, inicio, horas, local, destinatarios, dataLimite, visto, path) VALUES(?, ?, ?, ?, ? ,?, ?, ?, ? )";
$stmt = $mysqli->prepare($sql);
if ($stmt === false) {
    trigger_error('Wrong SQL: ' . $sql . ' Error: ' . $mysqli->error, E_USER_ERROR);
}
$stmt->bind_param('issssssis', $escola, $form, $data, $horas, $local, $dest, $datas, $visto, $target_path);
if (!$stmt->execute()) {
    echo json_encode(array('status' => 'error', 'message' => 'Opppss...A formação não foi gravada'));
}
} else {
echo json_encode(array('status' => 'error', 'message' => 'Opppss...A formação não foi gravada'));
}
$stmt->close();
echo json_encode(array('status' => 'success', 'message' => 'Nova formação gravada'));

This is my ajax

$.ajax({
            url: 'nova_formacaoBD.php',
            dataType: 'json',
            data: data,
            success: function(data) {
                $('#ajaxDivOk').html('Informação: Esta formação foi registada na base de dados');
                if(data.status == "success"){ 
                   $('#ajaxDivOk').append(data.message);
                }
             }
          });

And this is my form

 <form action="nova_formacaoBD.php" method="post" id="formacao" name="formacao" enctype="multipart/form-data">

UPDATE

The data is all the input fields in the form

Seven strings and upload of one file

 <form method="post" id="formacao" name="formacao" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="exampleInputFile">Escola: </label>
                        <select class="form-control" id="escola" name="escola" onchange="verificaEscola()">
                            <?php echo $escolaOptions; ?>
                        </select>   
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Nome Formação: </label>
                        <input class="form-control" id="form" name="form" onchange="verificaNome()">
                        </input>
                    <div class="form-group">
                            <label for="exampleInputEmail1">Data de Início: </label><input type="text" class="form-control" id="data" name="data" onchange="verificaData()" />
        </div>

                    <div class="form-group">
                            <label for="exampleInputEmail1">Horas: </label><input type="text" class="form-control" id="horas" name="horas"  onchange="verificaHoras()">
        </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Local: </label>
                        <input class="form-control" id="local" name="local" onchange="verificaLocal()">
                        </input>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Destinatários: </label>
                        <input class="form-control" id="dest" name="dest" onchange="verificaDest()">
                        </input>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">Data Limite: </label><input type="text" class="form-control" id="datas" name="datas" onchange="verificaDataLimite()"/>
        </div>
                    <div class="form-group">
                       <label for="exampleInputFile">Programa da Formação</label>
                       <input type="file" name="fileToUpload" id="fileToUpload" name="fileToUpload">
                    </div>          

                    <button type="submit" class="btn btn-default" onclick="return checkBoxes(this)">Registar</button>
                </form>

This is my form complete

UPDATE 2 (now it works but i have a warning in my console Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

and the beforeSend funtion doesn't work I don't see the div "Wait while updating the file) Js code

<script type="text/javascript">
     $(document).ready(function () {
        $("#formacao").submit(function (event) {
            event.preventDefault();
            //grab all form data  
              var formData = new FormData($(this)[0]);

            $.ajax({
                url: 'nova_formacaoBD.php',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function(data){
                    $('#ajaxDivAlert').html('A carregar o ficheiro...aguarde por favor')
                },
                success: function (data) {
                    var result = data.status;
                    console.log(result);
                    if(result == 'success'){
                        $('#ajaxDivAlert').empty();
                        $('#ajaxDivOk').html('Informação: ' + data.message);   
                        $("#ajaxDivOk").fadeIn(); 
                        $("#ajaxDivOk").fadeOut(5000);
                    }
                },
                error: function(){
                   $("#ajaxDivErro").html('Esta formação já está registada na base de dados');
                   $("#ajaxDivErro").fadeIn();
                   $("#ajaxDivErro").fadeOut(5000);
                }
            });

            return false;
        });
    });
    </script>

So, i just need to put info to complete the code, the rest is working

Answer 1

You have some changes to do :

Html : Remove the action="nova_formacaoBD.php" like that :

 <form method="post" id="formacao" name="formacao" enctype="multipart/form-data">

Then I suppose that you have a ajax called like that :

UPDATE

 $(document).ready(function () {
    $("#formacao").submit(function (e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        var ajaxDivAlert = $('#ajaxDivAlert');

        $.ajax({
            url: 'nova_formacaoBD.php',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function () {
                ajaxDivAlert.empty().html('A carregar o ficheiro...aguarde por favor')
            }
        }).done(function (data) {
            var result = data.status;
            if (result == 'success'){
                ajaxDivAlert.empty().fadeIn().html('Informação: ' + data.message).fadeOut(5000);
            }
        }).fail(function () {
            ajaxDivAlert.empty().fadeIn().html('Esta formação já está registada na base de dados').fadeOut(5000);
        });
    });
});

You had the error XMLHttpRequest because you put async: false. I removed it because since jQuery 1.8, the use of async: false with jqXHR ($ .Deferred) is deprecated