ajax - send json to rest api not work

Question

I've looking for hours but still don't know how to fix it,

I've a json data like this

{
    "salutation" : "tes",
    "location" : "tes",
    "reference_code" : "tes",
    "isCustomer" : 1,
    "email_to" : "yudi@nawadata.com",
    "phone" : "089999999",
    "front_name" : "Adhitya",
    "name" : "Adhitya",
    "age" : 13,
    "marital_status" : "tes",
    "dependents" : "tes",
    "income" : "100000",
    "cover" :   ["Legacy","Education","Retirement"],
    "total_allocated" : 10000000,
    "total_tuition" : 300000,
    "total_cost" : 200000,
    "total_gap" : 1211212121,
    "target" : "2323232323",
    "file_name" : "tes",
    "language" : "id",
    "isFromUmbrella" : 1,
    "collegeperiod" : 2017,
    "collegeage" : 14,
    "collegecosttotal" : 2000000,
    "sangatpenting" : "tes",
    "tigaprioritas" : "tes",
    "arr_child" : [{
            "name" : "coba",
            "monthly_saving" : 20000,
            "educost" : 2000,
            "destination_university" : 10000,
            "year_to_university" : 1000,
            "year" : 2017
        }],
    "arr_triangle" : [
        {
            "name" : "invesment",
            "background" : "#c00",
            "size" : 1
        },
        {
            "name" : "retirement",
            "background" : "#c00",
            "size" : 1
        },
        {
            "name" : "education",
            "background" : "#c00",
            "size" : 1
        },
        {
            "name" : "legacy",
            "background" : "#c00",
            "size" : 1
        },
        {
            "name" : "health",
            "background" : "#c00",
            "size" : 1
        },
        {
            "name" : "life",
            "background" : "#c00",
            "size" : 1
        }
        ]
}

But every time I'm click the button, it's just loading without any feedback to me, did I doing something wrong?

here's the JS code :

function sendoi()
{
    var ItemJSON = {"salutation":"tes","location":"tes","reference_code":"tes","isCustomer":1,"email_to":"yudi@nawadata.com","phone":"089999999","front_name":"Adhitya","name":"Adhitya","age":13,"marital_status":"tes","dependents":"tes","income":"100000","cover":["Legacy","Education","Retirement"],"total_allocated":10000000,"total_tuition":300000,"total_cost":200000,"total_gap":1211212121,"target":"2323232323","file_name":"tes","language":"id","isFromUmbrella":1,"collegeperiod":2017,"collegeage":14,"collegecosttotal":2000000,"sangatpenting":"tes","tigaprioritas":"tes","arr_child":[{"name":"coba","monthly_saving":20000,"educost":2000,"destination_university":10000,"year_to_university":1000,"year":2017}],"arr_triangle":[{"name":"invesment","background":"#c00","size":1},{"name":"retirement","background":"#c00","size":1},{"name":"education","background":"#c00","size":1},{"name":"legacy","background":"#c00","size":1},{"name":"health","background":"#c00","size":1},{"name":"life","background":"#c00","size":1}]}
    $.ajax({
        url: 'http://localhost/dbsapi/api/data/postpdfeducation',
        type: 'POST',
        contentType: 'application/json',
        data: ItemJSON, 
        dataType: "json",
        success: function(){
           alert('hello');
        },
        error: function(){
            alert('error');
        }
    });
};

HTML :

<button type="submit" onclick="sendoi()" class="site-font-light mobile-handler">Submit</button>

Answer 1

It's because you're clicking a submit button, so presumably the parent <form> element is submitting. You should hook to the submit event of that form instead, and call preventDefault() on the event, something like this:

$(function() {
  $('#form').on('submit', function(e) {
    e.preventDefault();
    var item = { /* your object... */ }
    $.ajax({
      url: 'http://localhost/dbsapi/api/data/postpdfeducation',
      type: 'POST',
      contentType: 'application/json',
      data: item,
      dataType: "json",
      success: function() {
        console.log('hello');
      },
      error: function() {
        console.log('error');
      }
    });
  });
});

<form action="/foo" method="post" id="form">
  <!-- form elements here... -->
  <button type="submit" class="site-font-light mobile-handler">Submit</button>
</form>

Also note that the data you are sending is an object, not JSON. It's not converted to JSON until jQuery sends it in the request.