Php 使用jquery ajax获取JSON数据不起作用

我试图理解如何使用jQueryAjax获取和显示数据。我有一个php页面

（data.php）

，它成功地从mysql数据库检索数据，并将数据编码到json数组中。客户端我有一个名为

get.php

的页面。我就是不明白为什么我的脚本不会从

data.php

中获取任何数据，我在firebug控制台中什么也得不到

data.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

哪些产出：

[  
   {  
      "id":"236",
      "title":"The Jungle Book"
   },
   {  
      "id":"235",
      "title":"The Shallows"
   },
   {  
      "id":"232",
      "title":"For Your Eyes Only"
   },
   {  
      "id":"231",
      "title":"Ice Giants"
   }
]

get.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

（“按钮”）。单击（函数（）{
{
$.ajax（{
url:'data.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）
{
变量id=数据[0]；
var title=数据[1]；
$（'#output'）.html（“id:+id+”名称：+vname）；
} 
});
}); 
输出：
获取数据

$（“按钮”）。单击（函数（）
{
$.ajax（{
url:'data.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）
{
变量id=数据[0]；
var title=数据[1]；
$（'#output'）.html（“id:+id+”名称：+vname）；
} 
});
});

像这样试试

$（“按钮”）。单击（函数（）
{
$.ajax（{
url:'data.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）
{
变量id=数据[0]；
var title=数据[1]；
$（'#output'）.html（“id:+id+”名称：+vname）；
} 
});
});

像这样试试

您几乎没有什么错误，比如：您没有为按钮指定

jquery（$）

选择器，使用多个括号

{

内部单击功能，内部 ajax成功您已针对

id

和

title

分配了完整对象 应该是

id=data[0]['id']

和

title=data[0]['title]

和另一个 错误：没有定义变量

vname

。php更好的json输出您应该在

data.php

中使用

标题（'Content-Type:application/json'）；

试试这个：
index.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

输出：
获取数据
$（“按钮”）。单击（函数（）{
$.ajax（{
url:'data.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）{
//控制台日志（数据）；
var id=data[0].id；
var title=数据[1]。title；
$（'#output'）.html（“id:+id+”name:+title）；
} 
});
}); 

data.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

您几乎没有什么错误，比如：您没有为按钮指定

jquery（$）

选择器，使用多个括号

{

内部单击功能，内部 ajax成功您已针对

id

和

title

分配了完整对象 应该是

id=data[0]['id']

和

title=data[0]['title]

和另一个 错误：没有定义变量

vname

。php更好的json输出您应该在

data.php

中使用

标题（'Content-Type:application/json'）；

试试这个：
index.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

输出：
获取数据
$（“按钮”）。单击（函数（）{
$.ajax（{
url:'data.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）{
//控制台日志（数据）；
var id=data[0].id；
var title=数据[1]。title；
$（'#output'）.html（“id:+id+”name:+title）；
} 
});
}); 

data.php

echo json_encode($mydata);

<script>
    ("button").click(function(){
      {
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data)          
          {
            var id = data[0];             
            var title = data[1];           
            
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          } 
        });
      }); 
</script>

    <h3>Output: </h3>
    <button>Get Data</button>
    
      <div id="output"></div>

<h3>Output: </h3>
<button>Get Data</button>
<div id="output"></div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
    $("button").click(function(){
        $.ajax({                                      
          url: 'data.php',                       
          data: "",                       
          dataType: 'json',                    
          success: function(data){
            //console.log(data);
            var id = data[0].id;             
            var title = data[1].title;           
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+title);
          } 
        });
      }); 
</script>

<?php 
 header('Content-Type: application/json'); //use header to specify data type
 //echo json_encode($mydata); // un-comment this line
 echo '[{"id":"236", "title":"The Jungle Book"}, {"id":"235", "title":"The Shallows"}, {"id":"232", "title":"For Your Eyes Only"}, {"id":"231", "title":"Ice Giants"} ]'; // comment this line
?>

您缺少

之前的
$
（“按钮”）

和额外的

{

。这是标记（按钮之前的脚本）中的实际顺序吗？如果是这样，那么您必须将代码包装在一个文件夹中，或者在关闭

之前移动页面底部的完整

。您缺少

之前的
$
（“按钮”）

和额外的

{

。这是标记中的实际顺序吗（按钮之前的脚本）？如果是这样，则您必须将代码包装在一个文件夹中，或在关闭前将完整的

移动到页面底部