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

【问题标题】：how to pass named route parameter with ajax如何使用ajax传递命名路由参数
【发布时间】：2019-09-06 04:23:02
【问题描述】：

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

我想去的路线路线

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

Ajax

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。

【问题讨论】：

这个 ajax 函数在 blade 文件中吗？
是的，在刀片文件中
不要在刀片中编写 Ajax 代码，这是不好的做法。将其写入 JavaScript 文件并加载到您的视图中。

标签： javascript ajax laravel

【解决方案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');
   }
});

【讨论】：

【解决方案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');
   }
});

【讨论】：

真的很棒
你是个救命恩人

【解决方案3】：

将+ 放在id 变量周围，并确保您通过formdata 变量传递X-CSRF-Token 或尝试发送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');
   }
});

【讨论】：

您的代码有效..我忘记了 X-CSRF。感谢您的帮助
很高兴为您提供帮助:)
我的 url 得到 +id+ 而不是 id

【解决方案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');
   }
});

【讨论】：

【解决方案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');
   }
});

【讨论】：

但是id是动态的

【解决方案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) {
        
      }
    });
    
  });

});

【讨论】：

【解决方案7】：

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

使用完整的网址

$(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);
        }
    });
});

通过使用命名路由参数

$(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);
        }
    });
});

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

【讨论】：