Question

我正在想办法通过在属性链接上启用ajax来减少javascript / ajax代码的数量（找到想法here）。

目标是通过重复使用相同的javascript而不进行编辑来制作ajax请求。

Everythings工作得很好，但我无法弄清楚如何使用锚链接传递多个数据。

我正在尝试这个

<a href="{{ route('tasks.create') }}" 
    data-endpoint="{{ route('tasks.create') }}" 
    data-target="addtask .modal-content .panel-body"
    data-cache="false"
    data-async="true"
    data-parameters="[{{ $data1 }} , {{ $data2}}]" 
    >Add a task
</a>

在另一个（静态）视图中我有这个脚本

$('body').on('click', 'a[data-async="true"]', function(e)
{
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),
        cache = self.data('cache'),  
        parameters = self.data('parameters'); //Probably not the best thing to do             

    $.ajax({
        url: url,
        cache : cache,
        data : parameters, //To edit?
        success: function(data)
        { 
           if (target !== 'undefined'){ $('#'+target).html( data ); }
        }
    });
});

在我的名为tasks.create的php脚本中，我想使用$data1和$data2。但我不知道如何实现这一目标。有什么想法吗？

或者整个想法是愚蠢的，有一个更聪明的方法来做到这一点？

Answer 1

我会从javascript的角度使用不透明的字符串。首先，我会找到一个合理的分隔符，它不会出现在数据变量中，我会假设'|'的工作原理。

HTML

called_from_lib

PHP

deadlock

Answer 2

我会这样做：

<a href="{{ route('tasks.create') }}" 
    data-endpoint="{{ route('tasks.create') }}" 
    data-target="addtask .modal-content .panel-body"
    data-cache="false"
    data-async="true"

    data1-parameters='{!! json_encode($data1) !!}'
    data2-parameters='{!! json_encode($data2) !!}'

    >Add a task
</a>

和ajax电话：

$('body').on('click', 'a[data-async="true"]', function(e)
{
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),
        cache = self.data('cache');             

    $.ajax({
        url: url,
        cache : cache,
        data : {
            data1: self.attr('data1-parameters'),
            data2: self.attr('data2-parameters')
        },
        success: function(data)
        { 
           if (target !== 'undefined'){ $('#'+target).html( data ); }
        }
    });
});

将数据从锚链接传递到AJAX

2 个答案: