Ajax-Code, der dazu führt, dass mein Code nicht richtig läuft, warum?

-1

Ich bin neu im Web zu entwickeln und arbeite derzeit an einem Modul für eine Schulwebsite. Ich habe ein dynamisches Eingabefeld erstellt und arbeite jetzt am Backend. Das Problem ist, wenn ich den Code normal benutze, dann ist Front-End in Ordnung, aber wenn ich etwas Basis-AJAX-Code hinzufüge, um mein Formular die Daten zu übermitteln, ohne die Seite neu zu laden, leidet das Front-End. Wenn ich auf Hinzufügen klicke, um ein neues Eingabefeld zu erstellen, funktioniert es einfach nicht.Ajax-Code, der dazu führt, dass mein Code nicht richtig läuft, warum?

Hier ist eine Probe von meinem Code:

<html> 
<head> 
<title>Test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<header>Dynamic Add Input Fields</header> 
    <form name="form1" id="form1"> 
     <table class="table table-bordered" id="dynamic_field"> 
      <tr> 
       <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td> 
       <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td> 
      </tr> 
     </table> 
     <input type="button" name="submit" id="submit" value="Submit"/> 
     <input type="reset" name="reset" id="reset" value="Reset"/> 
    </form> 
    <script type="text/javascript" > 
    $(document).ready(function() { 
     var i = 1; 
     $('#add').click(function() { 
      i++; 
      $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
     }); 
     $(document).on('click','.btn_remove',function() { 
      var button_id = $(this).attr("id"); 
      $("#row"+button_id+"").remove(); 
     }); 

    }); 
</script> 

</body> 
</html>

Und der AJAX Code, den ich hier hinzufügen versuche:

$(document).ready(function() { 
    var i = 1; 
    $('#add').click(function() { 
     i++; 
     $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
    }); 
    $(document).on('click','.btn_remove',function() { 
     var button_id = $(this).attr("id"); 
     $("#row"+button_id+"").remove(); 
    }); 
    $('#submit').click(function() { 
     $.ajax({ 
      type:"POST", 
      url:"check.php", 
      data:$('#form1').serialize(), 
      success:function (data) { 
       alert(data); 
       $('form1')[0].reset(); 
      } 
     }); 
    }); 
});

Seite Aktion für PHP ist hier:

<?php 
    $conn = mysqli_connect('localhost','root','root','Test2'); 

    if(!$conn) { 
     echo 'Couldn\'t connect to database'.mysqli_error(); 
    } 
    $count = $length = ''; 
    $length = count($name[]); 

    for($count=0 ; $count<$length ; $count++) { 
     $sql = "INSERT INTO `check1` (name) VALUES ('$name[$count]')"; 
     $result = mysqli_query($conn,$sql); 
     if(!$result) { 
      echo 'Couldn\'t add data '.$count.mysqli_error(); 
      break; 
     } 
    } 
?>

Was ich einfach erreichen möchte, ist ein Formular zu erstellen, in dem unendlich viele Eingabefelder zur Laufzeit und beim Formular erstellt werden können übergeben wird, werden die Daten in der Datenbank gespeichert, ohne die aktuelle Seite neu zu laden. Sorry für Fehler (falls vorhanden) und danke für Ihre Hilfe und Zeit.

Quelle

2017-09-19 Mahesh Suthar

Definieren Sie "funktioniert nicht". Was tut es? Gibt es Fehler in der Entwicklungskonsole des Browsers? Wird der JavaScript-Code überhaupt ausgeführt? Wird die AJAX-Anfrage gestellt? Wie lautet die Antwort des Servers? Was passiert konkret? – David

Ich habe den Code geändert. Bitte überprüfen Sie –

Sie haben den Code geändert, aber Sie haben das Problem nicht geklärt. Wie schlägt es beim Debuggen fehl? Niemand kann hier sehen, was auf Ihrem Computer passiert. Du musst es uns sagen. – David

Sie möchten Ihren Handler an das Formular senden, nicht klicken. Achten Sie außerdem darauf, das Standardverhalten abzubrechen, um zu verhindern, dass die Seite weg navigiert.

$('#form1').submit(function(e) { 
    $.ajax({ 
     // ... 
    }); 

    e.preventDefault(); 
});

Quelle

2017-09-19 16:09:51

Ajax-Code, der dazu führt, dass mein Code nicht richtig läuft, warum?

Antwort

Verwandte Themen