Question

我正在尝试根据SQL查询的结果显示特定的div。

我的问题是我无法让div以异步方式切换。 现在需要刷新页面以便div更新。

  <?php
  //SQL query

   if (foo) {
   ?>

   <div id="add<?php echo $uid ?>">
      <h2><a href="#" class="plus" ?>">Add to list!</a></h2>   
   </div>

   <?php
       } else { 
   ?>
  <div id="remove<?php echo $uid ?>">
     <h2><a href="#" class="minus" ?>">Delete!</a></h2>
  </div>

  <?php     
              }
  <?          


 <script type="text/javascript">
 //add to list

 $(function() {
 $(".plus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_add.php",
 data: info,
 success: function(data){
 $('#add'+I).hide();
 $('#remove'+I).show();
 }
 });
 return false;
 });

 });
 </script>


 <script type="text/javascript">
 //remove 
 $(function() {
 $(".minus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_remove.php",
 data: info,
 success: function(data){
 $('#remove'+I).hide();
 $('#add'+I).show();
 }
 });

 return false;

 });

 });
 </script>

ajax_add.php和ajax_remove.php只包含一些SQL查询。

div #follow和#remove缺少什么来切换而不必刷新页面？

Answer 1

“我正在尝试根据SQL查询的结果显示特定的div”

您的代码似乎对SQL查询的结果没有任何作用。您在Ajax成功回调中隐藏或显示的div仅取决于单击的链接，而不取决于查询的结果。

无论如何，你的点击处理程序试图从没有一个元素的元素中检索id属性。你有：

$(".plus").click(function(){
  var element = $(this);
  var I = element.attr("id");

...其中.plus是没有id的锚元素。这是包含已定义id的div的锚点。您可以使用element.closest("div").attr("id")从div中获取id，但我认为您打算在锚点上定义id，因为您的html中目前有一个不完整的PHP位：

<a href="#" class="plus" ?>">
                         ^-- was this supposed to be the id?

试试这个：

<a href="#" class="plus" data-id="<?php echo $uid ?>">

然后：

 var I = element.attr("data-id");

另请注意，您不需要两个单独的脚本元素和两个文档就绪处理程序，您可以在同一文档中绑定两个单击处理程序。在您的情况下，由于您的两个单击函数几乎完全相同，您可以将它们组合到一个处理程序中：

  <script type="text/javascript">
  $(function() {
    $(".plus,.minus").click(function(){
      var element = $(this);
      var I = element.attr("data-id");
      var isPlus = element.hasClass("plus");
      $.ajax({
        type: "POST",
        url: isPlus ? "ajax_add.php" : "ajax_remove.php",
        data: 'id=' + I,
        success: function(data){
          $('#add'+I).toggle(!isPlus);
          $('#remove'+I).toggle(isPlus);
        }
      });
      return false;
    });    
  });
  </script>

Answer 2

我喜欢使用Ajax Reloading的方法是使用2个文件。

第一个：发布所有数据的主文件。
第二个：ajax文件，其中包含db的任务。

比它的工作原理如下：

在主文件中，用户可以说点击按钮。并且该按钮正在激活jQuery ajax功能。比ajax文件获取请求并发布（使用“echo”或等效文件）。此时，Main文件获得成功，而不是包含结果的响应。而且我使用响应来更改某个div的整个HTML内容。

例如：

jQuery ajax函数：

$.ajax({
type: 'POST',  // Type of request (can be POST or GET).
url: 'ajax.php', // The link to the Ajax file.
data: {
    'action':'eliran_update_demo', // action name, used when one ajax file handles many functions of ajax.
    'userId':uId, // Simple variable "uId" is a JS var.
    'postId':pId  // Simple variable "pId" is a JS var.
},
success:function(data) {
    $("#div_name").html(data); // Update the contents of the div
},
error: function(errorThrown){
    console.log(errorThrown); // If there was an error it can be seen through the console log. 
}
});

PHP ajax函数：

if (isset($_POST['action']) ) {
    $userId = $_POST['userId']; // Simple php variable
    $postId = $_POST['postId']; // Simple php variable
    $action = $_POST['action']; // Simple php variable

    switch ($action) // switch: in case you have more than one function to handle with ajax.
    {
        case "eliran_update_demo":
                    if($userId == 2){
                echo 'yes';
            }
            else{
                echo 'no';
            }
        break;
    }
}

在那个php函数中你可以做任何你想做的事情！
千万不要忘记你可以在这个基础上做任何事情。

希望这有助于你：）

如果您有任何问题请问！：）

使用jQuery和AJAX显示/隐藏div无法正常工作

2 个答案:

jQuery ajax函数：

PHP ajax函数：

希望这有助于你：）