如何使用ajax传递命名路由参数

Question

我需要使用ajax传递路由参数，但我在ajax代码中使用命名路由方法。

路线我想去路线

Route::post('/edit/{id}', 'ArticleController@updateArticle')->name('updateArticle');

阿贾克斯

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle',"id") }}",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

我想在ajax URL 中使用变量id 。

Answer 1

我有同样的问题，只需用这个更改你的ajax url。

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle') }}" + '/' + id,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 2

尝试使用替换功能：

var id = $("input[name=editId]").val();
var url = "{{ route('updateArticle', ":id") }}";
url = url.replace(':id', id);

$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url: url,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 3

把+周围id变量，并确保你通过通过X-CSRF令牌formdata变量或尝试发送manualy ：

替换这一行：

url:"{{ route('updateArticle',"id") }}",

有了这个 ：

url:"{{ route('updateArticle',"+id+") }}",

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle',"+id+") }}",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 4

你可以这样做。

在您的刀片文件中

<script>
window.your_route = "{{ route('updateArticle',['id'=>$id]) }}";
</script>

在您的 JavaScript 中，您可以使用创建的变量。

  $.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:window.your_route,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 5

您可以在下面这样做，只需硬编码 url 和 id

var id= $("input[name=editId]").val();

$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"edit/1",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 6

通知

 <form id="form-create-role" action="{{route('role-create')}}" >

在文件 role-create.js 中

 $(function(){
  
  $('#form-create-role').submit(function (event) { 
    event.preventDefault();
    $.ajax({
      type: "post",
      url: $(this).attr('action'),
      data: $(this).serialize(),
      dataType: "json",
      success: function (response) {
        
      }
    });
    
  });

});

Answer 7

我通过两种方式做到这一点

1. 通过使用完整网址

$(document).on('click', '.view', function(){
    let contactId = $(this).attr('data-id');
    $.ajax({
        type: "GET",
        url: window.location.origin + "/view-contact-details/" + contactId,
        success: function (response) {
            console.log(response);
        }
    });
});

2. 通过使用命名路由参数

$(document).on('click', '.view', function(){
    let contactId = $(this).attr('data-id');
    let url = "{{ route('view.contact', ['id' => ":contactId"]) }}";
    url = url.replace(":contactId", contactId);
    $.ajax({
        type: "GET",
        url: url,
        success: function (response) {
            console.log(response);
        }
    });
});

您可以使用其中任何一个:)