在Image拖放之后,使AJAX保存以保存图像及其类

时间:2014-01-29 09:26:35

标签: javascript jquery

我有一个页面,我从一个div拖动图像并将其放入另一个div。在drop事件之后,用户必须通过发出get请求单击保存按钮以将数据保存在数据库中。但是在单击按钮后,页面将刷新,并且该图像将再次位于上一个div中。

那么我可以做些什么来进行AJAX调用,以便在drop事件之后保存图像及其类?

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

1 个答案:

答案 0 :(得分:0)

<强>的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
        }
    });
});