Question

我正在使用Ajaxy插件尝试恢复ajax请求历史记录。

考虑代码：

$.Ajaxy.configure({
    'Controllers': {
        '_generic': {
            request : function() {},
            response: function(){
                var data = this.State.Response.data; 
                jQuery('#content').html(data.responseText);
            }
        }
    }
});

我有这条线

var data = this.State.Response.data;

将responseText注入#content元素。

但是我可能需要在请求页面创建URL并在触发ajax请求之前定义目标id之前运行一些代码。

例如，假设我有一个产品列表页面（不是真正的代码，我刚刚为此问题创建）：

<button data-id="1" data-controller="product" data-action="edit" onClick="getPage(this, '#editContainer1');" >Edit</a>
<button data-id="1" data-controller="product" data-action="remove" onClick="getPage(this, '#removeContainer1');" >Remove</a>
<hr>
<button data-id="2" data-controller="product" data-action="edit" onClick="getPage(this, '#editContainer2');" >Edit</a>
<button data-id="2" data-controller="product" data-action="remove" onClick="getPage(this, '#removeContainer2");" >Remove</a>
<hr>

很多结果，可能会增加ID ......

拥有执行以下操作的JavaScript代码：

function getPage(element, target)
{
    var id = jQuery(element).data('id');
    var controller = jQuery(element).data('controller');
    var action = jQuery(element).data('action');
    var url = "/" + controller + "/" + action + "/" + id;
    jQuery.get(url,function(responseText){jQuery(target).html(responseText)});
}

那么，我该如何解决呢？

Answer 1

如果我理解你的要求...... 您不需要HTML元素中的onClick操作： HTML：

<button data-id="1" data-controller="product" data-action="edit" >Edit</a>
<button data-id="1" data-controller="product" data-action="remove">Remove</a>
<hr>
<button data-id="2" data-controller="product" data-action="edit">Edit</a>
<button data-id="2" data-controller="product" data-action="remove">Remove</a>
<hr>

JAVASCRIPT：

$(function(){
    $('button[data-controller=product]').click(function () {
        var id = $(this).data('id');
        var composedURL = "/"+$(this).data('controller')+"/"+$(this).data('action')+"/"+id
        $.ajax({
            url: composedURL,
        })
        .done(function(data) {
            // called when ajax request was successful
            console.log("success");
            if($(this).attr('data-action')=='edit'){
                // clicked EDIT button
                $('#editContainer'+id).html(data);
            }
            else{
                // clicked REMOVE button
                $('#removeContainer'+id).html(data);
            }
        })
        .fail(function() {
            // called when there was an error
            console.log("error");
        })
        .always(function() {
            // called when request finished (regardless of error or success)
            console.log("complete");
        });

    })
});

触发状态更改之前的jQuery Ajaxy插件回调

1 个答案: