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 
     }); 
    }); 
});