Javascript 从JSON对象获取数据时出错_Javascript_Jquery_Json_Ajax

Javascript 从JSON对象获取数据时出错

javascript jquery json ajax

Javascript 从JSON对象获取数据时出错,javascript,jquery,json,ajax,Javascript,Jquery,Json,Ajax,我有一个JSON数据作为info.JSON [ {"employee": {"name":"A", "salary": "324423"}}, {"employee": {"name":"B", "salary": "43111"}}, {"employee": {"name":"C", "salary": "43434"}}, {"employee": {"name":"D", "salary": "120000"}},

我有一个JSON数据作为info.JSON

[


    {"employee": {"name":"A", "salary": "324423"}},

        {"employee": {"name":"B", "salary": "43111"}},

        {"employee": {"name":"C", "salary": "43434"}},

        {"employee": {"name":"D", "salary": "120000"}},



]

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

和index.html作为链接链接链接

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>


变量项，$emp=$（'#emp'）$aa=$（'a'）$sal=$（‘工资’）；
$.ajax({
url:“info.json”，
成功：功能（数据）{
项目=数据；
}
})
$aa.单击（函数（）{
var指数=$aa.指数（本）；
变量
inf=项目[索引]。员工；
$sal.text（inf.salary）；
返回false；
})

我只想在index.html中JSON数据的点击按钮上显示员工的姓名和工资：

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

全部同时在一个链路中

全部由4个单独的4个链接组成

但得到的错误如下：

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

我认为这很简单，但我对AJAX还是新手。

提前感谢

如果您的JSON在最后一行有一个额外的逗号，请将其删除

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

您的代码正在获取json数据，但没有对其进行解析，请使用以下命令

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

$.ajax({
    url: "info.json",
    success: function(data) {
        item = JSON.parse(data);
    }
})

现在，您在项目中有了数据

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>

访问您的数据：员工人数为

项。长度
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

第一个员工姓名是项[0]。员工。姓名

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

第一个员工工资是项[0]。员工工资
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

第二名员工的姓名是项[1]。员工。姓名

    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

第二名员工工资为项[1]。员工工资
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

等等
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

首先，您需要确保在数据从服务器返回后附加处理程序
其次，您需要删除最后一个JSON雇员后面的（，）

这是JSON：-
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

[
{"employee": {"name":"A", "salary": "324423"}},

    {"employee": {"name":"B", "salary": "43111"}},

    {"employee": {"name":"C", "salary": "43434"}},

    {"employee": {"name":"D", "salary": "120000"}}
]

代码如下：-
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>    

 var item, $emp = $('#emp');
 $aa = $('a');
 $sal = $('#salary');
 $.ajax({
url: "info.json",
success: function(data) {
  //item = data;
  //handle click only after the data came back
  handleClick(data);
},
error:function(xhr,status,error){
  console.log(error);
}
 })
 var handleClick = function(item){
$aa.click(function() {
var index = $aa.index(this);
debugger;
if (item) {
  var
    inf = item[index].employee;
  $sal.text(inf.salary);
  $emp.text(inf.name);
}
return false;
  })
}

下面是一个完整的
我建议您检查浏览器的network developer工具，看看是否确实有来自服务器的响应或者是否发生了错误。为什么在不确定是否得到结果时启用单击？您需要使用json.parse（）解析json。在第26行（如图所示），您的json无效，删除最后一行末尾的逗号
{“employee”：{“name”：“D”，“salary”：“120000”}，什么是“JSON.parse（data）”我不能简单地使用“data”ajax将以字符串形式返回数据，JSON.parse（）将数据转换为JSON对象，但是每次显示调试器暂停时，请按F8。我正在使用chromei删除调试器，添加了名称处理检查demoOk，该问题通过删除调试器解决了，但我们为什么要使用它？当我们想在某个执行点中断代码时，我们会使用调试器检查代码状态是否符合预期，并找出应该更改的内容。如果答案有用，请进行投票。很高兴它有所帮助：）
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var item,$emp=$('#emp') ;$aa=$('a') ;$sal=$('#salary');
    $.ajax({
    url:"info.json",
    success:function(data){
    item=data;
    }
           })

    $aa.click(function(){
      var index=$aa.index(this);
        var
        inf=item[index].employee;
            $sal.text(inf.salary);
        return false;
    })

    </script>