如何使用 AJAX 发布和更新 jQuery 序列化答案

【问题标题】：How to post and update jQuery Serialize using AJAX如何使用 AJAX 发布和更新 jQuery 序列化
【发布时间】：2021-08-15 09:16:11
【问题描述】：

请注意，我已经完成了下面的 StackOverflow 问题，这正是我需要的，但不幸的是，它没有发布

Question similar to

我的代码 -

Test.php

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

<ul id="sortable">
    <li id="item-1">Item 1</li>
    <li id="item-2">Item 2</li>
</ul>
Span 1: <span id="span"></span>
Span2: <span id="span2"></span>

<script>
$(document).ready(function () {
    $('ul').sortable({
        axis: 'y',
        stop: function (event, ui) {
            var data = $(this).sortable('serialize');
            $('#span2').text(data);
            $.ajax({
                data: data,
                type: 'POST',
                url: 'test2.php',
                success: function(data){ 
                    $("#span").text(data); 
                }
            });
    }
    });
});
</script>

Test2.php

<?php 
 include('../db.php'); 

$date = $_POST["data"];

$conn = new mysqli ($servername, $dbusername, $dbpassword, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "UPDATE table SET something = '$something'
            WHERE id = '$id'";
    
    if(mysqli_query($conn, $sql)){
        
        echo $date;
    }
    
$conn->close();

?>

谁能帮我弄清楚为什么数据没有发布到 test2.php 页面

和

如何使用发布到 test2.php 的数据对表格进行排序

提前致谢。

【问题讨论】：

首先将您的代码包装在 try 中并捕获，这样它会显示错误还将错误函数添加到 ajax 这将在 ajax 中捕获错误。其次，在排序停止功能上调用 ajax 是个坏主意
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!

标签： php jquery ajax post jquery-ui-sortable

【解决方案1】：

对于那些遇到相同问题的人，这里是解决方案：

Test.php

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

<ul id="sortable">
    
<?php
    $q = ' SELECT * FROM temp';
            $result = mysqli_query($conn, $q);
            if ($result->num_rows > 0) {
            while( $items = $result->fetch_assoc() ){
?>
    
    <li id='sort_<?php echo $items['id'] ?>'>
        <ul style="display:inline-block;"><?php echo $items['name'] ?></ul>
        <ul style="display:inline-block;"><?php echo $items['name'] ?></ul>
    </li>
    
<?php
            }
         }
      ?>
    
</ul>


<script>
$(document).ready(function () {
    $('#sortable').sortable({
      opacity: 0.325,
      tolerance: 'pointer',
      cursor: 'move',
      update: function(event, ui) {
         var post = $(this).sortable('serialize');

         $.ajax({
            type: 'POST',
            url: 'test2.php',
            data: post,
            dataType: 'json',
            cache: false,
            success: function(output) {
               console.log('success -> ' + output);
            },
            error: function(output) {
               console.log('fail -> ' + output);
            }
         });

      }
   });
});
  $('#sortable').disableSelection();
</script>

Test2.php

<?php 
$isNum = false;

foreach( $_POST['sort'] as $key => $value ) {
    if ( ctype_digit($value) ) {
        $isNum = true;
    } else {
        $isNum = false;
    }
}

if( isset($_POST) && $isNum == true ){
   $orderArr = $_POST['sort'];
    $order = 0;
    if ($stmt = $conn->prepare(" UPDATE temp SET o_id = ? WHERE id=? ")) {
        foreach ( $orderArr as $item) {
            $stmt->bind_param("ii", $order, $item);
            $stmt->execute();
            $order++;
        }
        $stmt->close();
    }
    echo json_encode(  $orderArr );
    $conn->close();
}

?>

希望对有需要的人有所帮助。

【讨论】：