Post on native php (without framework) Into Code Igniter using AJAX

Question

I'm trying to post data on my HTML code to CI with Ajax. But I got no response?

Here is my JS Code

$(document).ready(function(){
$("#simpan").click(function(){
    nama_pelanggan = $("#nama_pelanggan").val();
    telp = $("#telp").val();

    jQuery.ajax({
        type: "POST",
        url: "http://192.168.100.100/booking_dev/booking/addBookingViaWeb/",
        dataType: 'json',
        data : {
            "nama_pelanggan":nama_pelanggan,
            "telp":telp,
        },
        success: function(res) {
            if (res){
                alert(msg);
            }
        }
    });     
});
});

And here is my form

<form>
Nama Pelanggan <br> 
<input type="text" name="nama_pelanggan" id="nama_pelanggan"><br>
Telepon<br>
<input type="text" name="telp" id="telp"><br>
<input type="button" name="simpan" id="submit" value="Simpan">
</form>

and here is my contoller function code

public function addBookingViaWeb(){
    $data = array(
        'nama_pelanggan' => $this->input->post('nama_pelanggan'),
        'telp'=>$this->input->post('telp')
    );
    echo json_encode($data);
}

Here is my post param

But I got no response

any idea?

Answer 1

add method in from if you use post then

<form method="post"  action ="" >

Answer 2

Try using JQuery form serialize() to declare which data you want to post. It automatically put your form input into ajax data. Example :

first set ID to your form tag

<form id="form">

then

$.ajax({
    type:'POST',
    url : 'http://192.168.100.100/booking_dev/booking/addBookingViaWeb/',
    data:$('#form').serialize(),
    dataType:'JSON',
    success:function(data){
         console.log(data);
    }
});

Answer 3

First problem I see is in your ajax submission code. Change

$("#simpan").click(function(){

to

$("#submit").click(function(event){

Notice that I added the event parameter. You now need to prevent the default submission behavior. On the first line of your click method add

event.preventDefault();

Now I'm assuming that your url endpoint http://192.168.100.100/booking_dev/booking/addBookingViaWeb/ can handle POST requests. Usually this is done with something like PHP or Ruby on Rails. If I was doing this in PHP I would write something like the following:

<?php
    $arg1 = $_POST["nama_pelanggan"];
    $arg2 = $_POST["telp"];

    // do something with the arguments

    $response = array("a" => $a, "b" => $b);
    echo json_encode($response);
?>

I personally don't know anything about handling POST requests with js (as a backend) but what I've given you should get the data over there correctly.

Answer 4

I got solution for my problem from my friend xD just add header("Access-Control-Allow-Origin: *"); on controller function

Thank you for helping answer my problem.