如何添加ajax后查询发送

请帮忙解决我的问题。是一个网站jQueryUI的一个例子 - http://jqueryui.com/sortable/#connect-lists 如何添加ajax后查询发送

代码：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #sortable1, #sortable2 { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
    } 
    #sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Item 1</li> 
    <li class="ui-state-highlight">Item 2</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 


</body> 
</html>

我需要发送一个AJAX POST请求到服务器，当你在sortable1和sortable2添加的元素。如何做到这一点？谢谢。

来源

2016-07-25 noobprogrammer

所以侦听更新事件 – epascarello

预言：你会很快警告SO规则等更好，更明确地描述你的问题。并添加一些代码片段到目前为止你做了什么。另外，最好删除第一句话，因为SOnazis会惩罚你这个:) – marmeladze

当你需要改变sortable1列表中的项目顺序时需要ajax调用吗？ –

试试这个sortable1然后重复sortable2。

var length1 = $("ul#sortable1 > li").length; 
$("#sortable1").bind("DOMSubtreeModified", function() { 
    if ($("ul#sortable1 > li").length >= length1) { 
     $.ajax({ 
      url: "some Url", 
      data: {parameter values}, 
      success: function(data) { 
      }, 
      dataType: "html", 
      type: "POST", 
      cache: false, 
      error: function() { 
       alert("Process Not Finished"); 
      } 
     }); 
    } 
});

来源

2016-07-25 12:57:45 Slan

您可以在sortable1和sortable2列表中进行ajax调用，如下所示。

$("#sortable1, #sortable2").bind("sortchange", function(event, ui) { 
    $.ajax({ 
     url: "some Url", 
     data: {parameter values}, 
     dataType: "json", 
     type: "POST", 
     success: function(data) { 
     }. 
     error: function() { 
      alert("Process Not Finished"); 
     } 
    }); 
});

来源

2016-07-25 13:00:02

如何添加ajax后查询发送

回答

相关问题