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

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 ，因为您的PHP当前不完整HTML：

<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");

还要注意，您不需要两个单独的脚本元素和两个文档就绪处理程序，您可以从同一文档就绪中绑定两个单击处理程序。 在您的情况下，由于您的两个click函数执行的功能几乎相同，因此可以将它们组合为一个处理程序：

  <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文件。

比它像这样工作：

在主文件中，用户可以说单击一个按钮。 并且该按钮正在激活jQuery ajax函数。 比ajax文件获取请求并发布出去（带有“ echo”或等效项）。 在这一点上，主文件获得了成功，而不是包含结果的响应。 然后我使用响应来更改特定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函数中，您可以做任何您想做的事！
永远不要忘记，您可以在此基础上做任何事情。

希望这对您有所帮助:)

如果你有问题，就问吧 ！ :)