jQuery使用Ajax和mySQL排序

嗨我为我的网站的后端创建了一个可排序列表来组织我的类别，并且我已经将它们全部工作，因此它使用Ajax运行更新SQL语句，并且它在没有重新加载的情况下保存了我的数据，但是我在数据库后台显示的订单号不会改变，除非我重新加载，否则任何帮助都会很棒，提前致谢！jQuery使用Ajax和mySQL排序

PHP

 <?php 
    $sql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name 
      FROM app_categories LEFT JOIN app_status 
      ON app_categories.cat_status = app_status.sta_id 
      ORDER BY cat_order ASC"; 

     if($result = query($sql)){ 
      $list = array(); 

      while($data = mysqli_fetch_assoc($result)){ 
       array_push($list, $data); 
      } 

      foreach($list as $i => $row){ 
      ?> 
       <div class="row" id="page_<?php echo $row['cat_id']; ?>"> 
        <div class="column two"><?php echo $row['cat_name']; ?></div> 
        <div class="column two"><?php echo $row['cat_slug']; ?></div> 
        <div class="column two"><?php echo $row['cat_status']; ?></div> 
        <div class="column two"><?php echo $row['cat_order']; ?></div> 
       </div> 
      <?php 
      } 
     } 
     else { 
      echo "FAIL"; 
     } 
    ?>

的jQuery与Ajax调用

 $(document).ready(function(){ 
     $("#menu-pages").sortable({ 
      update: function(event, ui) { 
       $.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') }); 
      } 
     }); 
    });

我的ajax.php这确实我的更新

<?php 

parse_str($_POST['pages'], $pageOrder); 

foreach ($pageOrder['page'] as $key => $value) { 
    $sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'"; 

    if(query($sql)) { 
     echo "YES"; 
    } 
    else { 
     echo "NO"; 
    } 

}

？>

来源

2013-03-22 i092173

你不出现有任何类型的手柄代码前端更新。最简单的做法是在你的ajax文章中添加一个回调函数，让服务器以json数据的形式发回更新信息。

所以ajax.php看起来更像

<?php 

parse_str($_POST['pages'], $pageOrder); 

foreach ($pageOrder['page'] as $key => $value) { 
$sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'"; 

if(query($sql)) { 
    $orderSql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name 
     FROM app_categories LEFT JOIN app_status 
     ON app_categories.cat_status = app_status.sta_id 
     ORDER BY cat_order ASC"; 

    if($result = query($sql)){ 
      echo json_encode(mysqli_fetch_assoc($result)); 
      return; 
    } 

} else { 
    echo json_encode(array('result' => 'failure')); 
} 

}

（是的，这是丑陋的和未经考验的，但你的想法。）

您的JavaScript会再看看像

$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') }, function(res){ 
     if (typeof res.result !== undefined && res.result === 'failure'){ 
       alert('failed!'); 
       return; 
     } else { 
       $.each(res, function(i, item){ 
        $("#page_" + item.cat_id).find('div:eq(3)').html(item.cat_order); 
       }); 
    }, 'json');

这又是可怕的，但希望传达这一点。

或者，您可以简单地更新排序div中的数字，只要它被移动。这将是这样的：

$("#menu-pages").sortable({ 
     update: function(event, ui) { 
      $.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') }); 
      $('.row').each(function(i){ 
       $(this).find('div:eq(3)').html(parseInt(i) + 1); 
      }); 
     } 
    });

也不考了，这是假设cat_sort为1索引且没有遗漏任何值等等等等

来源

2013-03-22 02:55:40

jQuery使用Ajax和mySQL排序

回答

相关问题