使用ajax json php將表單數據存儲到數據庫中

Question

我正在嘗試將表單數據存儲在數據庫中，但是我的代碼反映了所有內容。 這是我的代碼

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文件分離時，它什么也沒顯示。 里面有什么問題或我錯過了什么。

Answer 1

你有

type:"post",

在您的AJAX請求中，但服務器端處理$ _GET參數：

$lname = $_GET['Lname'];

將$_GET更改$_GET $_POST ，您將看到自己的值。

但是您所有的代碼都很糟糕。 您無法在Internet上發布此內容。 您的JavaScript不好，並且服務器端有很多問題，包括MySQL Injection。 需要使用准備好的語句和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));
        })
    });
})