How to send Json data into database using Jquery and Ajax?

Question

I have made form of customer details form when I click the button, It send Json data to customer. But my code is not inserting data into database. I am new in web technology, please tell me where I am wrong.

my Script:

 <script>   
    $(document).ready(function(){              
            $("#btnBooking").on("click", function(){                   

                var uName = document.getElementById('userName').value;        
                var mailId = document.getElementById('addressemailId').value;           
                var mobNum = document.getElementById('userContactNumber').value;                    
                $.ajax({
                    url:"http://192.168.1.11/customerhomes/customer.php", 
                    type:"GET", 
                    dataType:"json", 
                    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum}, 
                    //type: should be same in server code, otherwise code will not run
                    ContentType:"application/json", 
                    success: function(response){ 
                            alert("13");                                                 
                        }, 
                        error: function(err){ 
                        alert(JSON.stringify(err)); 
                    } 
                })              
            }); 
    });
</script>

form in html

<body>
    <div class="page-header text-center">
        <form >
            <div class="col-lg-8">                                  
                <div class="form-group">
                        <label class="col-lg-3 control-label">Name:<font style="color: red;">*</font></label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" id="userName" name="userName" placeholder="Full Name" value="">
                        </div>
                </div>


                <div class="form-group">
                    <label class="col-lg-3 control-label">Mobile:<font style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" id="userContactNumber" name="userContactNumber" type="number" placeholder="" onkeypress="enableKeys(event);" maxlength="10" placeholder="9966778888">
                    </div>
                </div>

                <div class="form-group">
                        <label class="col-lg-3 control-label">Email:<font style="color: red;">*</font></label>
                        <div class="col-lg-9">                                  
                            <input type="text" class="form-control" name="addressemailId" id="addressemailId" placeholder="you@example.com" value="">
                        </div>
                </div>  
                <div class="form-group marg-bot-45">
                    <label class="col-lg-3 control-label"></label>
                    <div class="col-lg-9">

                        <a href="" class="btn btn-info"  id="btnBooking">Confirm Booking</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>

server code

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("customer_details");
if(isset($_GET['type']))
{
    if($_GET['type']=="booking"){
        $name = $_GET ['Name'];
        $mail = $_GET ['Email'];
        $mobile = $_GET ['Mob_Num'];
        $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mail','$mobile')";
        $result1=mysql_query($query1);
    }
}
else{
    echo "Invalid format";
}

It seems that you are sending json formatted data to php but on the server side you don't decode it --> check out this answer http://stackoverflow.com/questions/4343596/parsing-json-file-with-php — Velimir Tchatchevsky, Jan 17 '15 at 09:06
Also, for learning purposes, have a look at prepared statements [here](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) (at as I believe one of the most useful answers around) — Jan Legner, Jan 17 '15 at 09:13
@ Jan Legner, thanks for reply but this link about for sqlinjection.... — Neelabh Singh, Jan 17 '15 at 09:16
You need to decode your json data, when you send them to php. — ilgaar, Jan 17 '15 at 09:38

Anand Patel · Accepted Answer · 2015-01-17T10:00:22.327

Use this

JavaScript Code:

<script>
        $(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 uName = $('#userName').val();
                var mailId = $('#addressemailId').val();
                var mobNum = $('#userContactNumber').val();

                $.ajax({
                    url:"http://192.168.1.11/customerhomes/customer.php",
                    type:"GET",
                    dataType:"json",
                    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum},
                    //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));
                    }
                })
            });
        });
    </script>

PHP Code

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
 mysql_connect("localhost","root","1234");
 mysql_select_db("customer_details");
if(isset($_GET['type']))
{
    $res = [];

    if($_GET['type'] =="booking"){
        $name  = $_GET ['Name'];
        $mail  = $_GET ['Email'];
        $mobile  = $_GET ['Mob_Num'];
        $query1  = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mail','$mobile')";
        $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);
?>

If data is inserted successfully it return true flag with message, otherwise false flag with message

Thanks Now data is inserting into database, Could you tell me why Previously It was not inserting.. — Neelabh Singh, Jan 17 '15 at 09:54
Probably its because you are clicking on link Confirm Booking, and its a link so what happen when you click on that it redirect to same page(refresh page), use button instead of link while using ajax or use preventDefault() — Anand Patel, Jan 17 '15 at 09:57

score 0 · Answer 2 · answered Jan 17 '15 at 09:20

0

I would first of all change the "GET" to a "POST" on both the ajax call and the receiving PHP page on the server.

Secondly, I'd check that the values are actually being passed to the PHP page by using echo to output each of them on the PHP side. That way you'll know at least the values are coming through.

JavaScript:

var uName = $('#userName').val();        
var mailId = $('#addressemailId').val();           
var mobNum = $('userContactNumber').val();                    
$.ajax({
    url:"http://192.168.1.11/service4homes/customer.php", 
    type:"POST", 
    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum}, 
    complete: function(response){ 
        var test = $.parseHTML(response);
        alert(test);
    }
 });

PHP Code:

echo $_POST["type"];
echo $_POST["Name"];
//etc...

answered Jan 17 '15 at 09:20

scgough

5,099
3
30
48

my code is to make sure the values are actually being passed from one place to the other. The PHP will output values (if available) and then the ajax will alert the result. You could also use Chrome dev tools (Ctrl+Shift+i) and click the "Network" tab to view the request and response of the PHP file when you click submit. Once you've proved the submit works and data is correctly passed, my next step would be to check the db connection and then the insert. Check everthing one step at a time basically! – scgough Jan 17 '15 at 09:27
But I have echoed in my code else{ echo "Invalid format"; } – Neelabh Singh Jan 17 '15 at 09:31
yes, but my logic is that you need to actually confirm that the Ajax is actually passing the values from the web form to your PHP code. – scgough Jan 17 '15 at 09:36

score 0 · Answer 3 · answered Jan 17 '15 at 09:47

try this it might help you.

in your ajax function:

1st change : ContentType:"application/json" to contentType: "application/json; charset=utf-8"

2nd

in data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum} change to data:{type1:"booking",Name:uName, Email:mailId, Mob_Num:mobNum}. see you set type as GET in ajax function so i am thinking that "type" is reserved word, so it might not work. and also check your url where you are sending ajax request if it is correct or not bcoz you are using ip address.

in your server code i am seeing typo. there is space between

$_GET ['name'], $_GET ['Email'], $_GET ['Mob_Num'].

there should be no space so change it to this,

$_GET['name']

$_GET['Email']

$_GET['Mob_Num']

How to send Json data into database using Jquery and Ajax?

3 Answers3