javascript - AJAX 调用 [object%20Object] 而不是 URL (Symfony)

Question

在 twig 中，我使用 data-post-url="{{ path('ajax')}}" 这样我就可以通过使用 var path = $( "#edit-url-js").data();

但是，不要去 http://localhost/happysaucer/web/app_dev.php/ajax它去 http://localhost/happysaucer/web/app_dev.php/profile/[object%20Object]

这很奇怪，因为当我 console.log(path) 'path' 变量时，它返回正确的 url。当我对 url 进行硬编码时，“path”变量返回 ajax 调用，就像它应该的那样。

AJAX 调用:

$(document).ready(function(){

var path = $("#edit-url-js").data();

$(".option-js").on("change", function() {

    $.ajax({
        url: path,
        type: "post",
        data: "test",
        success: function(data) {

        }
    });

});
});

Controller 操作

/**                                                                                   
* @Route("/ajax", name="ajax")
*/
public function ajaxAction(Request $request)    
{

    $r = new JsonResponse();

    return $r->setData([
        'success' => true,
    ]);
}

Twig 代码

<div class="consumeable-container" id="edit-url-js" data-post-url="{{ path('ajax')}}">

Answer 1

在执行 console.log(path) 时，您获得了正确的 URL，这真的很奇怪，但由于上下文的原因，它可能会从您调用它的位置发生变化，也许某处有一个全局路径变量？

无论如何，有 3 种方法可以正确获取该 URL:

jQuery:

var path = $("#edit-url-js").data("post-url")
var path = $("#edit-url-js").attr("data-post-url")

纯 JavaScript:

var path = document.getElementById("#data-post-url").getAttribute("data-post-url")

但我建议您将 URL 放在您的选项事件上，使其专属于该选项，只有在您希望它具有专属性的情况下，例如:

$(document).ready(function() {
    $(".option-js").on("change", function() {
      var $optionElement = $(this)
        $.ajax({
          url: $optionElement.data("post-url"),
          type: "post",
          data: "test",
          success: function(data) {
          }
        });
    });
});