0

Pessoal eu preciso de ajuda pela primeira vez não estou conseguindo colocar algo em prática. Preciso fazer com que um formulário que contém <textarea> e inputs tipo text,number e crucialmente a do tipo file sejam submetidos ao servidor através do AJAX. Mas não consigo enviar por AJAX puro. Tente também com o jquery.form.js mas ele retorna nada. To achando que não entendi o seu funcionamento. Achei outras funções também mas elas submetem apenas arquivos eu não consegui modificar por entendo pouco do JQuery

O formulário seria desse tipo:

                    <form id="form-add-post" method="POST" enctype="multipart/form-data">
                        <div class="header-form-add">
                            <div class="cont-head-right">
                                <label for="tl-post">Titulo:</label><br/>
                                <input id="tl-post" name="tl" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Como instalar alguma coisa."/>
                            </div>
                            <div class="cont-head-left">
                                <label for="tp-post">Tipo de postagem:</label><br/>
                                <input id="tp-post" name="tp" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Notícia"/>
                            </div>
                        </div>
                        <br/>
                        <br/>
                        <textarea id="editor"></textarea>


                        <label for="tags-post">Tags:</label><br/>
                        <input id="tags-post" name="tg" onblur="$(this) != ''? $(this).css(''):null;" type="text" class="input-adm"  placeholder="Ajax,JSON,JavaScript,PHP,html,JQuery"/>
                        <br/>
                        <labe for="img-post">Capa da postagem</labe><br/>
                        <input id="img-post" type="file" required="" name="img-post"  accept="image/*"/>
                        <div class="limt-img">
                            <img id="load-Imgpost" name="file" src="" alt="Load img"/>

                        </div>
                        <button id="btnsalvepost" type="submit">Salvar</button>
                    </form>

1 Resposta 1

1

Basta pegar o evento de submit do formulário e envia-lo através do método 'serialize()', exemplo...

<script>
        $(document).ready(function(){


                $( "#form-add-post" ).submit(function( event ) {
                 event.preventDefault();



                 var data = $("#form-add-post").serialize();

                    $.ajax({
                        type : "POST", // Método de envio
                        url  : "controller/suaPagina.php", // Aqui você trata os dados enviados e da um callback com Json
                        data : data, // Variavel acima
                        dataType: "json",
                        success : function(response){
                            if (response.codigo == 1) {
                                alert(response.mensagem);
                            }
                            if (response.codigo == 0) {
                                alert(response.mensagem);
                            }
                        }
                    })
                })

            })
    </script>

No servidor

    <?php
        // Aqui você pega os dados do seu form exemplo

        $titulo = (isset($_POST['tl'])) ? $_POST['tl'] : '';

        // resposta com Json

        if ($titulo == '') {
            $retorno = array('codigo' => 1, "mensagem" => "Erro ao receber dado");
            echo json_encode($retorno);
            exit();
        }
        else{
            $retorno = array('codigo' => 0, "mensagem" => "Dado recebido com sucesso");
            echo json_encode($retorno);
            exit();
        }
    ?>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .