Question

第一次AJAX尝试..... 我试图根据用按钮做出的选择来更新。

我目前只是提醒身份证，因为这就是我可以弄清楚要做什么。

是否可以将文件my_page.php放入div中，使用类＆＃34; populated_info＆＃34;？然后，当我按下另一个按钮时，页面将会再次运行，并使用新结果填充div。我已经根据ID构建并运行了my_page.php，但是无法在正确的位置进行渲染。

HTML：

    <form name="gen_info">
<div class="body">
    <div class="row">
        <div class="col-md-2">
            <table width="100%" class="border_yes">
                <tr>
                    <td>
                        Last Name, First Name
                    </td>
                </tr>
        <?php
                $result = mysqli_query($conn,"SELECT * FROM general_info");
                while($row = mysqli_fetch_array($result))
                {
                    $CURRENT_ID = $row['ID'];
                    $firstName = $row['firstName'];
                    $lastName = $row['lastName'];
                    ?>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-default custom" onclick="function1('<?php echo $CURRENT_ID;?>')"><?php echo $lastName.', '.$firstName; ?></button> 
                            <!-- button that will run the function -->
                        </td>
                    </tr>
        <?php       
}
        ?>
            </table>
        </div>
        <div class="col-md-10 populated_info"> <!-- WHERE I WOULD LIKE THE UPDATED INFORMATION -->

        </div>
    </div>
</div>
</form>

AJAX：

<script>
function function1(ID) {
$.ajax({  
  type: "POST",  
  url: "functions/my_page.php",
  data: "ID="+ID,
  success: function(resp){
    alert(resp); //how to get this to put the page back into the right spot?
  },  
  error: function(e){  
  alert('Error: ' + e);  
  }
 });
}
</script>

Answer 1

您的方法：

关于您的按钮，我建议将内联Javascript处理程序分开，以保持HTML和Javascript分离。我将使用自定义数据属性在此处存储ID：

<button type="button" class="btn btn-default custom mybutton" data-id="<?php echo $CURRENT_ID;?>">
    <?php echo $lastName . ', ' . $firstName; ?>
</button>

然后是jQuery：

$('.mybutton').click(function() {
    var ID = $(this).data('id');
    function1(ID);
});

您的AJAX请求：

您可以缩短整个功能，并使用$.load()将数据输入div：

function function1(ID) {
    // Get the output of functions/my_page.php, passing ID as parameter, and
    // replace the contents of .populated_info with it
    $('.populated_info').load('functions/my_page.php', { ID: ID });
}

在这里看起来你不需要回调函数，但是如果你这样做，你可以把它放在data参数之后。这里回调的一个有用的应用可能是你的错误处理程序。 See here如何实施一个。

另外，如果您只是获取数据，则应该使用GET HTTP方法而不是POST。

Answer 2

如果您仅使用replace alert(resp)

从$('.populated_info').html(resp);成功获得服务器的响应

<script>
    function function1(ID) {
    $.ajax({  
      type: "POST",  
      url: "functions/my_page.php",
      data: "ID="+ID,
      success: function(resp){
        $('.populated_info').html(resp);
      },  
      error: function(e){  
      alert('Error: ' + e);  
      }
     });
    }
    </script>

在a div中插入ajax响应

2 个答案: