JavaScript Probleme mit AjaxRequest

Dsimon24 · 9. März 2019

Hallo zusammen,

ich versuche mich gerade ein wenig an Ajax heran.
Ich möchte, dass ein PHP-Schript ausgeführt wird und eine einfache
Mail verschickt (vorerst), sobald ich eine Checkbox anklicke. Natürlich
passiert bei meinem Script aber recht gar nichts. Vielleicht kann mir
einer helfen!? - Was mache ich falsch?

test_data.html

HTML:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
   
    <input type="checkbox" class="add_mob" name="mob" id="mob_1" value="1"> kein FS<br>
    <input type="checkbox" class="add_mob" name="mob" id="mob_2" value="2"> FS mit FZ<br>
    <input type="checkbox" class="add_mob" name="mob" id="mob_3" value="3"> FS ohne FZ<br>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   
    <script type="text/javascript">
      $(document).ready(function()
      {
        $(".add_mob").click(function()
        {
        var ID = $(this).attr('id');
        }).change(function()
        {
        var ID = $(this).attr('id');
        var IID = document.getElementById("iid").value;
        var data=$("#"+ID).val();
        var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

        $.ajax({
        type: "POST",
        url: "test_data.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
          alert("Mobilität wurde gespeichert!");
        },
        error: function(data)
        {
          alert("Es ist ein Fehler aufgetreten!");
        }
        });
        });
      });
    </script>
   
  </body>
</html>

test_data.php

PHP:

<?php

    $id=mysql_escape_String($_POST['id']);
    //$field=mysql_escape_String($_POST['field']);
    //$value=mysql_escape_String($_POST['value']);

  mail('meine-email@meine-email.de', $id, 'Test', "From: Absender <absender@euredomain.de>");                      
   
?>

VG, David

Lawnmower · 9. März 2019

Was sagt die F12 Konsole?
Wird der HTTP Request ausgeführt? Wie ist die Rückmeldung?
Gibts ein Skriptfehler?

mastaqz · 9. März 2019

Und was hindert dich nun daran, selbst die Konsole zu öffnen?

TypeError: document.getElementById(...) is null

FranzvonAssisi · 9. März 2019

Es ist außerdem sehr empfehlenswert sich mit der fetch-API zu beschäftigen.

Promises sind die Zukunft in JavaScript, bei Ajax muss man sich das selber basteln, Ferch hat die Promises direkt mit drin.

Lg

Dsimon24 · 9. März 2019

Ich hab´s mal ein wenig angepasst:

Javascript:

    <script type="text/javascript">
  
      $(document).ready(function()     
      {
        $(".add_mob").click(function()  
        {
        var ID = $(this).attr('id');      // Die ID des Feldes!
        }).change(function()              
        {
        var ID = $(this).attr('id');     // Erste Checkbox = mob1
        var dataString = 'id=' + ID;

        $.ajax({
        type: "POST",
        url: "test_data.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
          alert("Mobilität wurde gespeichert!");
        },
        error: function(data)
        {
          alert("Es ist ein Fehler aufgetreten!");
        }
        });
        });
      });
  
    </script>

Nun bekomme ich aber in der Console die Meldung '$.ajax is not a function'.
Damit kann ich jetzt nicht viel anfangen. Was ist denn da so falsch dran?

mastaqz · 9. März 2019

Dsimon24 schrieb:
Ich hab´s mal ein wenig angepasst:

Nun bekomme ich aber in der Console die Meldung '$.ajax is not a function'.
Damit kann ich jetzt nicht viel anfangen. Was ist denn da so falsch dran?

Du kannst vielleicht nicht viel damit anfangen, aber Tausende von Leuten,
die diese Frage schon vor dir gestellt haben und deren Lösungen im Internet findbar sind, kannst du fragen.

https://www.startpage.com/do/dsearc...nction&cat=web&pl=opensearch&language=english

Und direkt der erste Treffer hat die Lösung...

Suche

JavaScript Probleme mit AjaxRequest

Dsimon24

Lieutenant

Lawnmower

Maître de cuisine

mastaqz

Lt. Junior Grade

FranzvonAssisi

Admiral

Dsimon24

Lieutenant

mastaqz

Lt. Junior Grade

Ähnliche Themen