Question

所以这里是代码。我可以从数据库中查询得很好，并在顶部回显json格式化的结果。现在稍后在页面上我想使用单击功能在单击按钮时再次显示它们。无法让它发挥作用。 HALP！

<?php
require_once ('mysqli_connect.php');

$q = "SELECT * FROM variables;";
$r = mysqli_query($dbc, $q);         
$array = mysqli_fetch_row($r);                              


  echo json_encode($array);

    ?>
    <html>
  <head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  </head>
  <body>

      <h2> Client example </h2>
     <h3>Output: </h3>
  <form action="api.php" method="post">
    <p><input type="button" name="calc" id="btn" value="Display" /></p>
  </form>

  <div id="output">this element will be accessed by jquery and this text replaced</div>

  <script id="source" language="javascript" type="text/javascript">
    $(document).ready(function() {
   $("#btn").click(
        function() { 

    $.ajax({                                      
  url: 'api.php',                            
  data: "",                        

  dataType: 'json',                   
  success: function(data)        
  {
    var id = data[0];             
    var vname = data[1];          

    $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 

  } 
});
  });
});

  </script>
  </body>
</html>

Answer 1

检查浏览器控制台以了解点击是否有效。如果他们将请求发送到正确的页面但在此之前更改您的代码。

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

到

....
$(document).ready(function(e) {
e.preventdefault();
$("#btn").click(
    function() {

Answer 2

尝试使用getJSON

我修改了你的代码

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

        $.getJSON( 'api.php')
        .done(function( data ) {
        $.each( data, function( key, val) { 
            $('#output').html("<b>id: </b>"+val.id+"<b> name: </b>"+val.vname); 
        });
        });
    });
});

无法获得点击功能以使用ajax和php

2 个答案: