2016-08-05 9 views
1

Ich versuche, Daten aus einem Formular in eine MySQL-Datenbank einzufügen. Der Ort, an dem ich denke, dass das Problem ist, ist, wo ich den Knopf im HTML verwende, warum ich das alles kopiert habe. Jede Hilfe wäre willkommen!Einfügen in die Datenbank (mysql) mit Ajax und PHP

Wenn ich den Submit-Button drücke, blinkt die Seite und nichts wird in die DB eingefügt. Es sollte ein grünes Feld angezeigt werden, das besagt, dass der Datensatz auf der HTML-Seite übergeben wurde.

Da einige Leute mehr besorgt sind Im Aufbau eines Authentifizierungssystems dann was falsch ist. Dies ist NICHT ein Authentifizierungssystem, es ist nur ein Beispiel dafür, wie Sie in eine MySQL-Datenbank einfügen.

Index.HTML

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Bootstrap Example with Ajax</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
\t <script src="js/insert.js"></script> 
 
\t 
 
\t <style> 
 
\t .custom{ 
 
\t \t margin-left:200px; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
\t <h2 class="text-center">Insert Data Using Ajax</h2> 
 
\t 
 
\t <br/> 
 
\t <p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p> 
 
\t <br/> 
 
\t <hr/> 
 
\t <form class="form-horizontal" role="form" method="POST"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label class="col-sm-2 control-label">Name</label> 
 
\t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t <input class="form-control" id="name" type="text" placeholder="Enter you name"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="email" class="col-sm-2 control-label">Email</label> 
 
\t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t <input class="form-control" id="email" type="text" placeholder="Your Email..."> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <fieldset > 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="password" class="col-sm-2 control-label">Password</label> 
 
\t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t <input class="form-control" id="password" type="text" placeholder="Your Password..."> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="gender" class="col-sm-2 control-label">Gender</label> 
 
\t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t <select id="gender" class="form-control"> 
 
\t \t \t \t \t <option value="Male">Male</option> 
 
\t \t \t \t \t <option value="Female">Female</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 
</body> 
 
</html> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t \t

insert.php

<?php 
 
\t //Create connection 
 
\t $connection = mysqli_connect('localhost','username','passwd','dbName'); 
 
\t 
 
\t if($_REQUEST['name']){ 
 
\t $name = $_REQUEST['name']; 
 
\t $email = $_REQUEST['email']; 
 
\t $password= $_REQUEST['password']; 
 
\t $gender = $_REQUEST['gender']; 
 
\t 
 
\t $q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')"; 
 
\t 
 
\t $query = mysqli_query($connection,$q); 
 
\t if($query){ 
 
\t \t echo ' Data Inserted Successfully' 
 
     mysql_close($connection); 
 
\t \t } 
 
\t } 
 
?>

js/insert.js

$(document).ready(function(e) { 
 
\t $('#submit').click(function(){ 
 
\t \t var name = $('#name').val(); 
 
\t \t var email = $('#email').val(); 
 
\t \t var password = $('#password').val(); 
 
\t \t var gender = $('#gender').val(); 
 
\t \t 
 
\t \t $ajax({ 
 
\t \t \t type:'POST', 
 
\t \t \t data:{name:name,email:email,password:password,gender:gender}, 
 
\t \t \t url:"insert.php", //php page URL where we post this data to save in databse 
 
\t \t \t success: function(result){ 
 
\t \t \t 
 
\t \t \t \t $('#alert').show(); 
 
\t \t \t \t 
 
\t \t \t \t $('#show').html(result); 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t }) 
 
\t }); 
 
});

+0

Was genau ist das Problem? Was funktioniert nicht? – WillardSolutions

+0

Sie erkennen, dass dies nie geschlossen wird "Echo" Daten erfolgreich eingefügt "und sollte Ihnen einen Parse-Fehler darüber geworfen haben. Sie haben uns auch nicht gesagt, welche Fehler Sie möglicherweise bekommen (das ist, wenn Sie überhaupt nach ihnen suchen), was macht es, Echo, usw.Also, überprüfe das und die Konsole. –

+0

Wenn ich den Submit-Button drücke, blinkt nur die Seite, und nichts ist in der DB. Auf der Seite sollte oben ein grünes Feld angezeigt werden, in dem ein Datensatz hinzugefügt wird. – Colin

Antwort

2

Wie auch immer, dieser spezielle Code funktioniert so, dass er in die Datenbank eingefügt werden kann, obwohl es irgendwo noch ein Problem gibt, das ich nicht herausfinden kann.

index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Bootstrap Example with Ajax</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script> 
     $(function() { 
     $('button').click(function() { 
      var name2 = $('#name').val(); 
      var email2 = $('#email').val(); 
      var password2 = $('#password').val(); 
      var gender2 = $('#gender').val(); 
      console.log('starting ajax'); 
      $.ajax({ 
      url: "./insert.php", 
      type: "post", 
      data: { name: name2, email: email2, password: password2, gender: gender2 }, 
      success: function (data) { 
       var dataParsed = JSON.parse(data); 
       console.log(dataParsed); 
      } 
      }); 

     }); 
     }); 

    </script> 

    <style> 
     .custom{ 
     margin-left:200px; 
     } 
    </style> 
    </head> 
    <body> 

    <div class="container"> 
     <h2 class="text-center">Insert Data Using Ajax</h2> 

     <form class="form-horizontal" > 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">Name</label> 
      <div class="col-sm-10"> 
      <input class="form-control" name="name" id="name" type="text" placeholder="Enter you name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="email" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10"> 
      <input class="form-control" name="email" id="email" type="text" placeholder="Your Email..."> 
      </div> 
     </div> 
      <div class="form-group"> 
      <label for="password" class="col-sm-2 control-label">Password</label> 
      <div class="col-sm-10"> 
       <input class="form-control" name="password" id="password" type="text" placeholder="Your Password..."> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="gender" class="col-sm-2 control-label">Gender</label> 
      <div class="col-sm-10"> 
       <select id="gender" class="form-control"> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
       </select> 
      </div> 
      </div> 
      <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </div> 
      </div> 
     </form> 
    </div> 
    </body> 
</html> 

insert.php

<?php 

    //Create connection 
    $connection = mysqli_connect('localhost', 'root', '', 'dbase'); 
    if($_POST['name']){ 
     $name = $_POST['name']; 
     $email = $_POST['email']; 
     $password= $_POST['password']; 
     $gender = $_POST['gender']; 

     $q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')"; 

     $query = mysqli_query($connection, $q); 

     if($query){ 
      echo json_encode("Data Inserted Successfully"); 
      } 
     else { 
      echo json_encode('problem'); 
      } 
     } 

?> 
+0

Ill Ich muss das grüne Pop-up umschreiben und erfolgreich sagen! Aber vielen Dank, das funktioniert perfekt! – Colin

0

Zuerst wird die jQuery Event-Handler, die Sie mit der ID zu einem Element sind angebracht „Eintragen“ wird nie feuern würde, da es keine Elemente in Ihrem HTML übereinstimmen. Ändern Sie Ihre HTML zu so etwas wie dieses:

<button type="submit" name="submit" id="submit"> Submit! </button>

Dann müssen Sie Ihre SQL-Syntax ein wenig verändern. Ihre Anfrage ist:

$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";

wo Sie mysql sagen diese Werte in die „user“ Tabelle einfügen, aber Sie sagen, dass es nicht die Spalten einfügen in. Sie brauchen etwas wie folgt aus:

$q = "INSERT INTO user (name, email, password) VALUES ('$name', '$email', '$password', '$gender')";

ich die leere Zeichenfolge in Ihre Werte annehmen soll ein Ort für die ID der Einfügung reservieren ... wenn Sie automatisch inkrementierende haben in Ihrem DB-Tabelle eingeschaltet Sie müssen die leere Zeichenfolge nicht einschließen. Dies ist nur ein Anfang, um Ihre Probleme zu beheben. Wenn Sie jedoch weitere Details zu den Fehlern angeben, die Sie erhalten, können wir Ihnen möglicherweise mehr helfen.

+0

Vielen Dank für den detaillierten Vorschlag, Sie haben Recht Ich habe Auto Inkrement gesetzt. Ich habe die Änderungen an der Schaltfläche erstellt, aber es fügt immer noch nicht in die DB (und in den PHP) ein. – Colin

+0

Haben Sie einen SSH-Zugriff auf den Server, auf dem sich die Datenbank befindet? Wenn dies der Fall ist, können Sie die Apache-Fehlerprotokolle anzeigen und sie können Ihnen einen Hinweis geben, warum Ihre Einfügung nicht funktioniert. Um Ihnen zu helfen, benötigen wir weitere Informationen darüber, welche Fehler ausgelöst werden und in welcher Umgebung der Code ausgeführt wird. Wenn Sie dies nicht getan haben, setzen Sie error_reporting in Ihrem PHP-Skript auf -1, um weitere Details zu erhalten, die möglicherweise dazu führen, dass Ihr Skript fehlschlägt: http://php.net/manual/en/function.error-reporting.php –