如何通过 AJAX 将 Jquery 可拖动 UI 与 mysql 连接

Posted 2023-02-24

【中文标题】如何通过 AJAX 将 Jquery 可拖动 UI 与 mysql 连接

【英文标题】：How to connect Jquery draggable UI with mysql via AJAX

【发布时间】：2017-10-29 15:48:05

【问题描述】：

我想在我的水平列表中拖动元素，而不是将位置保存在 mysql 中。

文本 sort=1&sort=2.... 仅用于测试目的。

这是我在 jquery 中的代码

$("#sortable").sortable(
                stop: function(event, ui) 
                    var data = $(this).sortable('serialize', key:"sort");
                    $('#tags').text(data);
                    $.ajax(
                        data: data,
                        type: 'POST',
                        url: 'listpriority.php'
                    );
                
            );

可排序功能正在运行。它序列化我的列表。 现在在服务器端，我想接收序列化的数据。

我的php代码：

<?php 
    print_r($_POST['sort']);
?>

但是 print_r 函数只显示列表的长度。 完整的 php 代码应该是：

<?php 
    include = ""; // the connection to sql

    if(isset($_POST['sort'])) 
        $sort = $_POST['sort'];
        $sql = "UPDATE tags SET position='".$sort."'";
        $result = mysqli_query($conn, $sql);
    
?>

【问题讨论】：

尝试var_dump($_POST);查看您的数据内容是否在$_POST数组中的另一个键中

尽管这不是问题的一部分，但我强烈建议您不要在没有对给定值进行任何验证的情况下将发布的值连接到 sql 查询中，因为存在 sql 注入的风险。如果你还没有意识到这个安全问题，我建议你看看这个en.wikipedia.org/wiki/SQL_injection

array(1) ["sort"]=> string(1) "5" 这是我使用 var_dump 函数时得到的结果

我认为您需要从 js 中的 ui 对象中获取所需的值，然后手动将它们添加到 post-data 中。 Have a look here

【参考方案1】：

我的解决方案：

$( "#sortable" ).sortable(
                update: function(event, ui) 
                    var data = $(this).sortable('serialize',  key: "sort" );
                    $('#tags').text(data);
                    $.post("listpriority.php", data);
                
            );

我将$.ajax 更改为$.post，然后在php echo($_POST['data']); 中回显数据

【参考方案2】：

尝试从隐藏字段中获取和设置数据

<div class="main_div">
    <div class="inner">
        <span>1</span>
        <input type="hidden" name="original[]" value="1">
        <input type="hidden" name="new[]" class="new_ord" value="1">
    </div>
    <div class="inner">
        <span>2</span>
        <input type="hidden" name="original[]" value="2">
        <input type="hidden" name="new[]" class="new_ord" value="2">
    </div>
    <div class="inner">
        <span>3</span>
        <input type="hidden" name="original[]" value="3">
        <input type="hidden" name="new[]" class="new_ord" value="3">
    </div>
    <div class="inner">
        <span>4</span>
        <input type="hidden" name="original[]" value="4">
        <input type="hidden" name="new[]" class="new_ord" value="4">
    </div>
    <div class="inner">
        <span>5</span>
        <input type="hidden" name="original[]" value="5">
        <input type="hidden" name="new[]" class="new_ord" value="5">
    </div>
</div>

而php脚本是

if(isset($_POST['post']) == 1) 
        $original = $_POST['original'];
        $new_val = $_POST['new_val'];
        for ($i=0; $i < count($original); $i++) 
            $sql = 'UPDATE TABLE Table_name SET order="'.$new_val[$i].'" WHERE id="'.$original[$i].'"';
            echo $sql."\n\r";
        
    

查看 jquery 代码 here 并取消注释 ajax 调用部分

也许对你有帮助