Speichern von Formulardaten in die Datenbank mit AJAX JSON PHP

Question

Ich versuche, Formulardaten in der Datenbank zu speichern, aber mein Code spiegelt alles wider. Hier ist mein Code

add.php

<form name='reg' > 
<fieldset> 
    <legend>Student information:-</legend> 
    <ul> 
     <li> 
      <label> FirstName: </label><input type="text" id="name" name="name" required> 
      <span id='error' style="display:none;color:red;"> Only alphabets </span> 
     </li> 

     <li> 
      <label> LastName: </label><input type="text" id="lname" name="lname" required> 
      <span id='error1' style="display:none;color:red;"> Only alphabets </span> 

     </li> 
     <li> 
      <label>Username:</label> 
      <input type="text" id="username" name="username"/> 
     </li> 
     <li> 
      <label>Password:</label> 
      <input type="password" id="password" name="password"/> 
     </li> 

     <label> 
      Gender: </label> 
     <input type="radio" id='gender' name="gender" value="male" required> Male 
     <input type="radio" name="gender" id='gender' value="female" required> Female 
     <input type="radio" name="gender" id='gender' value="other" required> Other 

     <li> 
      <label> 
       Email: </label> 
      <input id="email" type="text" name="email" required> 
      <span id='error2' style="display:none;color:red;"> Invalid email </span> 
     </li> 
     <li> 
      <label> Mobile:</label> 
      <input id="mobile" type="text" maxlength="10" name="mobile" required > 
      <span id='error3' style="display:none;color:red;"> only digits </span> 
     </li> 
     <li> 
      address: <textarea name="address" id="address" type="text" rows="3" cols="40"></textarea></textarea> 

     </li> 

    </ul> 
    <p><a href="" class="btn btn-info" id="btnBooking">Register</a></p> 
</fieldset> 
</form> 

und JavaScript-Datei ist als

serve.js

$(document).ready(function() { 
    $("#btnBooking").on("click", function (e) { 

     // as you have used hyperlink(a tag), this prevent to redirect to another/same page 
     e.preventDefault(); 

     // get values from textboxs 
     var name = $('#name').val(); 
     // alert('name'); 
     var lname = $('#lname').val(); 
     var username = $('#username').val(); 
     var password = $('#password').val(); 
     var gender = $('#gender').val(); 
     var mail = $('#email').val(); 
     var mobNum = $('#mobile').val(); 
     var address = $('#address').val(); 

     $.ajax({ 
      url: "http://localhost/project_cloud/fun.php", 
      type: "post", 
      dataType: "json", 
      data: {type: "add", Name: name, Lname: lname, User: username, Pass: password, Gen: gender, Email: mail, Mob_Num: mobNum, Addr: address}, 
      //type: should be same in server code, otherwise code will not run 
      ContentType: "application/json", 
      success: function (response) { 
       alert(JSON.stringify(response)); 
      }, 
      error: function (err) { 
       alert(JSON.stringify(err)); 
      } 
     }) 
    }); 
}); 

und eine andere PHP-Datei, die das Ergebnis speichert in der Datenbank

fun.php

<?php 
header('Access-Control-Allow-Origin: *'); 
mysql_connect("localhost", "root", ""); 
mysql_select_db("ocean"); 

if (isset($_GET['type'])) { 
    $res = []; 

    if ($_GET['type'] == "add") { 
     $name = $_GET ['Name']; 
     $lname = $_GET['Lname']; 
     $userN = $_GET['User']; 
     $passW = $_GET['Pass']; 
     $gen = $_GET['Gen']; 
     $mail = $_GET ['Email']; 
     $mobile = $_GET ['Mob_Num']; 
     $address = $_GET['Addr']; 
     $query1 = "insert into oops(username, password, firstname, lastname, gender, email, mobile, address) values('$userN','$passW','$name','$lname','$gen','$mail','$mobile','$address')"; 
     $result1 = mysql_query($query1); 

     if ($result1) { 
      $res["flag"] = true; 
      $res["message"] = "Data Inserted Successfully"; 
     } else { 
      $res["flag"] = false; 
      $res["message"] = "Oppes Errors"; 
     } 
    } 
} else { 
    $res["flag"] = false; 
    $res["message"] = "Invalid format"; 
} 

echo json_encode($res, $result1); 
?> 

Wenn ich schreibe meine serve.js Datei Code in add.php Datei gibt es mir in der Datenbank .Aber wie gespeichert führen, wenn ich es zu trennen versucht, es Datei js zeigt nichts . Was ist daran falsch oder ich vermisse etwas.

Answer 1

Sie haben

type:"post", 

in Ihrer AJAX-Request, aber Serverseite behandeln $ _GET Parameter: Ihre Werte

$lname = $_GET['Lname']; 

ändern $_GET-$_POST und Sie werden sehen.

Aber all dein Code ist schrecklich. Sie können dies nicht im Internet veröffentlichen. Sie haben schlechtes JavaScript und viele Probleme serverseitig, einschließlich MySQL Injection. Benötigen Sie all dies mit vorbereiteten Anweisungen und JS neu zu schreiben:

$(function() { 
    $("#btnBooking").on("click", function(e){ 
     e.preventDefault(); 
     var data = $(this).parents('form').serializeArray(); 
     data.type = 'add' 
     $.post('/project_cloud/fun.php',data) 
     .done(function(response){ 
      alert(JSON.stringify(response)); 
     }) 
     .fail(function(err){ 
      alert(JSON.stringify(err)); 
     }) 
    }); 
})