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

时间:2016-07-16 07:51:53

标签: javascript php jquery json ajax

我正在尝试将表单数据存储在数据库中,但我的代码反映了任何内容。 这是我的代码

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

当我在 serve.js 文件中编写 add.php 文件代码时,它会将结果存储在数据库中。但是当我尝试分开时它js文件它什么都没显示。它有什么不对或我错过了什么。

1 个答案:

答案 0 :(得分:0)

你有

switch
在您的AJAX请求中

,但服务器端处理$ _GET参数:

return

type:"post", 更改为$lname = $_GET['Lname']; ,您就会看到自己的价值观。

但你所有的代码都很糟糕。您无法在Internet中发布此内容。你有很糟糕的JavaScript和许多问题服务器端,包括MySQL注入。需要用准备好的语句和JS重写所有这些:

$_GET