图像拖放后使AJAX保存以保存图像及其类答案

【问题标题】：After Image drag and drop make AJAX save to save image and its class图像拖放后使AJAX保存以保存图像及其类
【发布时间】：2014-02-05 21:16:47
【问题描述】：

我有一个页面，我将图像从一个 div 拖放到另一个 div 中。删除事件后，用户必须单击保存按钮以通过发出获取请求将数据保存在数据库中。但是单击按钮后页面会刷新并且该图像再次在上一个 div 中。

那么我可以做些什么来进行 AJAX 调用，以便在放置事件后保存图像及其类？

javascript

$(function() {
    adFitsApp.set_app_cookie("{{ adftoken }}", "{{ adfdy }}");
    $('#sortable1 img').css("cursor", "pointer");


    $( "#sortable1 div" ).sortable({
        connectWith: "div",
        stop: function( event, ui ) {

            if($('#sortable2').find('img').length==6) {
                $('#btn-start').html("<a id='btn-start' href='/dashboard/redeem/{{ pk }}' >Redeem Coupon</a>");
            }
        }
    });

    $( "#sortable2" ).sortable({
        connectWith: "div",
        change: function( event, ui ) {
            var theID = ui.item.attr('id');
            ui.item.addClass(theID + '-style');
        }
    });
    $('#sortable2').find('img').length
});

【问题讨论】：

在每次放置事件后，通过 ajax 将图像保存到数据库，然后将保存图像的第二个 div 加载到数据库中
或者你可以使用cookies。

标签： javascript jquery

【解决方案1】：

Ajax

抱歉，我对 ajax 一无所知，请你给我一个演示可以的

Ajax基本上只是在JS（JQuery）中发送请求的一种方式

使用起来真的很简单：

$("element").on("event", function() {
    $.ajax({
        url: "your_url",
        data: {your: "data"},
        success: function(data) { 
            //success
        },
        error: function(data) {
            //error
        }
    });
});

代码

对你来说，我会试试这个：

<div class="control-group">
  <a id="btn-start" href="/dashboard/save" data-pk="{{ pk }}" class="btn btn-primary btn-embossed">Save</a>
</div>

$("#btn-start").on("click", function() {
    $.ajax({
        url: $(this).attr("href"),
        data: {pk: $(this).data("pk")},
        success: function(data) {
            //success here
        },
        error: function(data) {
           //error here
        }
    });
});

【讨论】：