使用ajax json将表单数据存储到数据库php

我试图在数据库中存储表单数据，但是我的代码反映了任何内容。这里是我的代码使用ajax json将表单数据存储到数据库php

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>

和JavaScript文件是

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)); 
      } 
     }) 
    }); 
});

和存储结果另一个PHP文件在数据库中

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); 
?>

当我写在add.php文件我serve.js文件代码它给我造成存储在数据库中。但是，当我试图分开它的JS文件就说明什么。它有什么不对或者我错过了什么。

来源

2016-07-16 oceanier

在您的Ajax请求您发布的数据，但在你的PHP文件（fun.php）尝试检索数据GET（$ _GET）。 –

你有

type:"post",

在您的AJAX请求，但服务器端处理$ _GET参数：

$lname = $_GET['Lname'];

变化$_GET到$_POST，你会看到你的价值观。

但是你所有的代码都很糟糕。你不能在互联网上发布这个。你有糟糕的JavaScript和许多服务器端的问题，包括MySQL注入。需要改写这一切与预处理语句和JS来：

$(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)); 
     }) 
    }); 
})

来源

2016-07-16 07:56:19 BaBL86

使用ajax json将表单数据存储到数据库php

回答

相关问题