Envio de formulário HTML usando Jquery AJAX

107

Estou tentando enviar um formulário HTML usando AJAX usando este exemplo .

Meu código HTML:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Meu roteiro:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

Isso não está funcionando, nem estou recebendo a mensagem de alerta e quando envio não quero redirecionar para outra página, só quero mostrar a mensagem de alerta.

Existe uma maneira simples de fazer isso?

PS: Tenho vários campos, coloquei apenas dois como exemplo.

jquery ajax form-submit Oliveira
fonte
você não pode acabar com o componente html "formulário"? e use o jquery para postar no manipulador de cliques do botão
Come

Respostas:

177

Descrição rápida de AJAX

AJAX é simplesmente JSON assíncrono ou XML (na maioria das situações mais recentes, JSON). Como estamos realizando uma tarefa ASYNC, provavelmente ofereceremos aos nossos usuários uma experiência de IU mais agradável. Neste caso específico, estamos fazendo um envio de FORM usando AJAX.

Muito rapidamente, há 4 acções web em geral GET, POST, PUT, e DELETE; estas correspondem directamente com SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, e DELETING DATA. Um formulário web / PHP / Python HTML / ASP.Net padrão ou qualquer outra formação é "enviar", que é uma ação POST. Por causa disso, a seguir todos descrevem como fazer um POST. Às vezes, no entanto, com http, você pode desejar uma ação diferente e provavelmente deseja utilitizar .ajax.

Meu código especificamente para você (descrito nos comentários do código):

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>
Expandir trecho

Documentação

Da $.postdocumentação do site da jQuery .

Exemplo : enviar dados de formulário usando solicitações Ajax

$.post("test.php", $("#testform").serialize());

Exemplo : poste um formulário usando ajax e coloque os resultados em um div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Nota importante

Sem usar OAuth ou no mínimo HTTPS (TLS / SSL), não use este método para dados seguros (números de cartão de crédito, SSN, qualquer coisa que seja PCI, HIPAA ou relacionado ao login)

abc123
fonte
@ abc123 como posso definir o cabeçalho do pedido de autorização neste? Eu tentei, beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "*****"); xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); },mas isso não define nenhum cabeçalho
mahendra kawde 05 de
@mahendrakawde, você precisaria usar, o $.ajaxqual posso escrever um exemplo, se quiser, mas essa é realmente uma pergunta separada
abc123
@ abc123 eu tenho um tópico iniciado para isso. Deixa-me partilhar contigo.
mahendra kawde
1
podemos evitar o uso de post de formulário e simplesmente fazer jquery post no manipulador de cliques de um botão (que é um botão html que não faz parte de qualquer div de formulário). Desta forma, event.preventdefault também não será necessário?
harshvchawla
1
@harshvchawla, é claro, mas então sua consulta de seleção para as variáveis ​​extraídas do elemento html é diferente
abc123
26 
var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })
Varun S
fonte
1
a função bem-sucedida / completa acontecerá quando a chamada for completada e receber 200 OK do servidor
Varun S
oi eu coloquei: $ (document) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " url ", data: postData, contentType:" studentFormInsert.php ", sucesso: function (responseData, textStatus, jqXHR) {alert (" data saved ")}, error: function (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); não está funcionando na verdade .. alguma modificação no lado do php é necessária?
Oliveira
4
bom exemplo e bem escrito, por favor poste alguma resposta com ele, embora não apenas um exemplo de código sem explicação.
abc123
2
Não entendo como conectar isso ao formulário que desejo postar
Piotr Kamoda
Por que não há explicação?
Rich
3

Se você adicionar:

jquery.form.min.js

Você pode simplesmente fazer isso:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

NOTA:

Você poderia usar $ ('FORM'). Serialize () simples como sugerido na postagem acima, mas isso não funcionará para FILE INPUTS ... ajaxForm ().

Martin Zvarík
fonte