ajax - 将 json 发送到 rest api 不起作用

Question

我已经找了几个小时，但仍然不知道如何解决它，

我有一个这样的json数据

{
    "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
        }
        ]
}

但是每次我点击按钮时，它只是加载而没有任何反馈给我，我做错了什么吗？

这是 JS 代码：

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

这是因为您正在单击提交按钮，所以可能是父 <form> 元素正在提交。您应该挂钩到该表单的提交事件，并在该事件上调用 preventDefault()，如下所示：

$(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>

另请注意，您发送的数据是一个对象，而不是 JSON。在 jQuery 将其发送到请求中之前，它不会转换为 JSON。