如何使用 AJAX

问题描述

请注意，我已经完成了下面的 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 的数据对表格进行排序

提前致谢。

解决方法

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

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();
}

?>

希望能帮到有需要的人。