Ajax請求調用json文件

Question

我想將名稱的值放在我的div標籤中的Employee對象中，他的id是#taarget。每當我在我的按鈕，點擊他的ID是#driver

這裏我jQuery代碼

$(document).ready(function() { 
    $("#driver").click(function() { 
     $.ajax(ajaxoptions); 
     // Ajax request sucess-- 
     var successpage = function (resp) { 
      $("#target").html(resp.Employee[0].Name); 
     }; 
     // Ajax request fail-- 
     var failurerror = function (req, status, err) { 
      console.log('something went wrong', status, err); 
     }; 
     // create a obect to make ajax request-- 
     var ajaxoptions = { 
      url: "EmpDetails.json", 
      dataType: "json", 
      contentType: "application/json"; 
      success: successpage, 
      error: failurerror 
     }; 
    }); 
}); 

這裏我的JSON文件.. EmpDeails.json

   { 
       "Employee": 
       [ 
        { 
        "Name": "Amit", 
       "Designation": "Trainee", 
       "Area": "Development" 
        }, 
        { 
        "Name":"Rahul", 
        "Designation": "Developer" 
        "Area":"Designing"  
        }, 
        { 
        "Name":"Sachin", 
       "Designation": "M.D" 
       "Area":"Management" 
        } 
       ] 
       } 

嘿M在jQuery的新..我的代碼沒有任何人可以幫助我使我的代碼可運行..它將不勝感激..

Answer 1

兩件事：

1. 你打電話$.ajax您填寫的選項前的對象，所以這行：

   $.ajax(ajaxoptions); 
   

   ...呼喚與undefined功能。在已創建選項對象後，請勿撥打電話。

2. 您同時擁有一個語法錯誤，並在那裏你讓你的ajaxoptions對象的API錯誤：

   var ajaxoptions = { 
       url: "EmpDetails.json", 
       dataType: "json", 
       contentType: "application/json"; // <=== On this line 
       success: successpage, 
       error: failurerror 
   }; 
   

   的語法錯誤是;末（應該是,）。 API錯誤是因爲您沒有向頁面發送任何參數，所以根本沒有必要指定contentType。這告訴服務器你的數據格式發送它。你沒有發送服務器JSON。

這裏有一個相當小的更新：

$(document).ready(function() { 
    $("#driver").click(function() { 

     // Ajax request sucess-- 
     var successpage = function (resp) { 
      $("#target").html(resp.Employee[0].Name); 
     }; 
     // Ajax request fail-- 
     var failurerror = function (req, status, err) { 
      console.log('something went wrong', status, err); 
     }; 
     // make ajax request-- 
     $.ajax({ 
      url:  "EmpDetails.json", 
      dataType: "json", 
      success: successpage, 
      error: failurerror 
     }); 
    }); 
}); 

很多人會寫這樣的：

$(document).ready(function() { 
    $("#driver").click(function() { 

     // make ajax request-- 
     $.ajax({ 
      url:  "EmpDetails.json", 
      dataType: "json", 
      success: function (resp) { 
       $("#target").html(resp.Employee[0].Name); 
      }, 
      error: function (req, status, err) { 
       console.log('something went wrong', status, err); 
      } 
     }); 
    }); 
}); 

但首先定義函數，你做的方式清晰幫助。如果你要做到這一點，你可以考慮使用功能聲明而不是表達，從而使功能會對JavaScript引擎不會對未按照即將ES6規格推斷函數名稱的專有名詞：

$(document).ready(function() { 
    $("#driver").click(function() { 

     // Ajax request sucess-- 
     function successpage(resp) { 
      $("#target").html(resp.Employee[0].Name); 
     } 
     // Ajax request fail-- 
     function failurerror(req, status, err) { 
      console.log('something went wrong', status, err); 
     } 
     // make ajax request-- 
     $.ajax({ 
      url:  "EmpDetails.json", 
      dataType: "json", 
      success: successpage, 
      error: failurerror 
     }); 
    }); 
});