none
$.ajax Aufruf wird nicht ausgeführt. RRS feed

  • Frage

  • Hallo NG,

    ich arbeite ganz neu mit JavaScript.

    Im Header lade ich diese beiden scripte.

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
       use strict";
       function handleSubmit() {
          alert('start');
          $.ajax({
                url: "https://formspree.io/meine@adresse",
                method: "POST",
                data: { message: "Hallo"},
                dataType: "json"
              });
              alert('end');
        }
    </script>

    Der alert Start wird angezeigt der End nicht mehr. Es ist der selbe Code wie auf der Seite:
    Beispielcode

    Die als form habe ich folgenden Code:

    <form name="myform" onSubmit="JavaScript:handleSubmit()">
        <div class="form-group">
            <label for="EmailAddress">Seu endereço de e-mail</label>
            <input type="email" class="form-control" id="EmailAddress" aria-describedby="emailHelp" placeholder="Digite seu endereço de e-mail" required>
            <small id="emailHelp" class="form-text text-muted">Nós nunca vamos compartilhar seu e-mail com mais ninguém.</small>
        </div>
        <div class="form-group">
                <label for="name">Seu nome</label>
                <input type="text" class="form-control" id="name"  placeholder="Digite seu nome" required>
        </div>
        <div class="form-group">
            <label for="message">Mensagem</label>
            <textarea class="form-control" id="message" rows="5" required></textarea>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Enviar</button>
    </form>

    Kann mir hier jemand helfen was ich falsch mache?

    Danke im voraus.

    Grüße Ingo

    Samstag, 30. März 2019 15:45

Alle Antworten

  • Hallo Ingo,

    öffne mit F12 im Browser zuerst mal die Developer Tools. In der Konsole solltest Du dann auch schon gleich den ersten Fehler in deinem Script sehen.

    use strict";

    ist kein gültiger Code. Wenn schon, dann so:

    "use strict";

    Siehe bspw.:

      https://www.w3schools.com/js/js_strict.asp

    Der nächste Fehler (den Du dann auch in den Developer Tools sehen kannst) ist, dass die von dir eingebundene jQuery Slim Version keine $.ajax Methode bereitstellt. Nimm die normale jQuery Version, dann geht das.,

    Dritter Fehler ist dann in onSubmit. Das ist schon ein Eventhandler, daher schreibt man dort nicht javascript: <Aufruf>(); sondern lässt javascript: weg, wobei das ggfs. je nach Browser trotzdem funktioniert. Dennoch würde ich das entfernen.

     


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
    https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport


    Sonntag, 31. März 2019 00:41
    Moderator
  • Hallo Stefan,

    wie immer bist Du meine letzte Rettung. 1.000 Dank dafür.

    Zu 1.:

    War nur ein Problem beim kopieren vom Code nach hier.

    Zu 2:

    Ich habe eingebundenen Scripte wie folgt erweitert:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Zu 3:

    Habe ich Aufruf geändert:

    <form name="myform" onSubmit="handleSubmit()">

    Ich habe jetzt eingefügt:

    function handleSubmit() {
       alert('handleSubmit');

    Wenn ich submit anklicke kommt die Meldung:

    Leider kommt immer noch keine E-Mail an.

    Grüße Ingo

    Sonntag, 31. März 2019 01:37
  • Hallo Ingo,

    die erste jQuery Einbindung (also die slim Variante) solltest Du entfernen. Sonst könnte da was kollidieren.

    Warum da keine Mail ankommt, kann ich dir natürlich nicht sagen. Zuerst schau mal (F12 => Developer Tools), ob der XHR Aufruf auf den entfernten Server korrekt durchgeht oder ob da evtl. direkt oder als Antwort ein Fehler kommt.

    Dann brauchst Du natürlich einen (soweit ich das gesehen habe, kostenpflichtigen) Account bei denen. Hast Du den?


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
    https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport

    Sonntag, 31. März 2019 07:20
    Moderator