2016-07-11 14 views
0

Vorlage habe ich eine Form:Ajax-Anfrage statt Post bekommen

<form onsubmit="return sendEmail()" id="emailForm" name="emailForm"> 
        <input type="hidden" name="_cc" value="[email protected]" /> 
        <div class="row"> 
         <p class="left"> 
          <label for="name">Name*</label> 
          <input type="text" required="required" name="name" id="name" value="" /> 
         </p> 
         <p class="right"> 
          <label>Email*</label> 
          <input type="email" required="required" name="_replyto"> 
         </p> 
        </div> 

        <div class="row"> 
         <p class="left"> 
          <label for="phone">Phone/Mobile</label> 
          <input type="text" required="required" name="phone" id="phone" value="" /> 
         </p> 
         <p class="right"> 
          <label for="company">Organization</label> 
          <input type="text" name="company" id="company" value="" /> 
         </p> 
        </div> 

        <p> 
         <label for="message" class="textarea">Queries</label> 
         <textarea class="text" name="message" id="message"></textarea> 
        </p> 
       <br /> 
        <div style="background-color: mediumaquamarine;margin-bottom: 2%" id="success"></div> 
        <button type="submit" class="btn btn-xl">Send</button> 

</form> 

und jQuery-Code mit dem Formular Ajax Post einreichen:

function sendEmail(){ 
     $.ajax({ 
      url: "http://formspree.io/[email protected]", 
      method: "POST", 
      data: $('#emailForm').serialize(), 
      dataType: "json", 
      success: function(result){ 
       $("#success").html("Message successfully sent"); 
      }, 
      error: function (request, status, error) { 
       $("#success").html("Oops! Something went wrong. Please try again"); 
      } 
     }); 
     return false 
    } 

aber es trägt immer Anfrage und führt zu Fehlermeldung erhalten Antwort, die Methode abrufen ist nicht zulässig, verwenden Sie nur Post. (Antwortcode 405).

Kann nicht herausfinden, was hier falsch ist.

+0

Sie müssen die Formularüberprüfung verhindern, bevor Sie eine AJAX-Anfrage senden. –

+0

Als Erstes überprüfen Sie die Dokumentation: http://api.jquery.com/jQuery.ajax/. Zweite Sache zu tun, verwenden Sie eine 'submit()' Event-Handler und stoppen Sie die normale Form Vorlage –

+0

Versuchen Sie das? '

' – MHS

Antwort

-1

Änderung method zu type folgend

function sendEmail(){ 
     $.ajax({ 
      url: "http://formspree.io/[email protected]", 
      type: "POST", 
      data: $('#emailForm').serialize(), 
      dataType: "json", 
      success: function(result){ 
       $("#success").html("Message successfully sent"); 
      }, 
      error: function (request, status, error) { 
       $("#success").html("Oops! Something went wrong. Please try again"); 
      } 
     }); 
     return false 
    } 
+0

Diese Lösung hat tatsächlich funktioniert. Seltsam zu sehen, dass es abgelehnt wurde. Vielleicht unterstützt diese Version von jquery das Schlüsselwort 'method' nicht. Müssen Sie googeln, um zu bestätigen! –

+0

froh, dass es geholfen hat :) – Arif

+0

Akzeptiert und Upvoted! Vielen Dank! –

0

ajax ist asynchronus Ihr Formular einreichen, sobald die Schaltfläche geklickt ausgelöst wird und die ajax Verfahren läuft im Hintergrund. Deshalb löst es get aus.

Als GET ist Standard-HTTP-Methode. schau mal hier:https://www.w3.org/TR/html401/interact/forms.html#h-17.3 Wenn du dir die Konsole anschaust sollte sie danach auch (post) auslösen.

Versuchen Sie stattdessen:

<form id="emailForm" name="emailForm"> 

Und in js:

$('#emailForm').submit(function (e){ 
    // stop the default form submit behaviour 
    e.preventDefault(); 
    $.ajax({ 
     url: "http://formspree.io/[email protected]", 
     method: "POST", 
     data: $('#emailForm').serialize(), 
     dataType: "json", 
     success: function(result){ 
      $("#success").html("Message successfully sent"); 
     }, 
     error: function (request, status, error) { 
      $("#success").html("Oops! Something went wrong. Please try again"); 
     } 
    }); 
    return false 
}); 
0

Der Fehler, den Sie bekommen können in Ihrem Server oder Servercode auf etwas bezogen werden.

Versuchen Sie, die Anforderungsheader und Parameter in eine json poster zu kopieren und versuchen Sie, die Anfrage von dort zu senden, wenn Sie immer noch einen Fehler erhalten, der bedeutet, dass es in Ihrem Server ist oder dass Ihre Anfrage einige Header möglicherweise fehlt.

Nachdem Sie es geschafft haben, eine gültige Postanforderung zu senden, wird es leichter sein, sie in eine Ajax-Anfrage umzuwandeln.

Verwandte Themen