1

我试图根据 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 缺少什么来切换而无需刷新页面？

4

2 回答 2

1

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

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

无论如何，您的点击处理程序正在尝试id从没有属性的元素中检索属性。你有：

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

...哪里.plus是没有id. 它是锚的包含 div 具有id定义。您可以使用从 divelement.closest("div").attr("id")中获取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>
于 2013-09-07T23:07:46.553 回答
1

我喜欢做 Ajax 重载的方式是使用 2 个文件。

  • 第一个：发布所有数据的主文件。
  • 第二个：使用 db 执行任务的 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 函数中，你可以做任何你想做的事情！
永远不要忘记，您可以在此基础上做任何事情。

希望这对你有帮助:)

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

于 2013-09-07T23:10:30.837 回答