javascript - 提交表单并在 单击时调用 Ajax

Question

我想使用 Ajax 向数据库添加一些内容。我有一个提交表单的链接，然后 Ajax 调用应该可以工作，但事实并非如此。我在不同的页面上使用相同的 Ajax 调用，但在该表单中，我使用带有提交类型的简单按钮。但在这个页面上，我想提交...

这是表格

{!! Form::open(['id' => 'ajax-form', 'style' => 'float:right']) !!}
  <input type="hidden" name = "idUser" id="idUser" value="{{Auth::user()->id}}">
  <input type="hidden" name = "idCampaign" id="idCampaign" value="{{$campaign->id}}">
  <a class="fa fa-bookmark fa-2x" onclick="document.getElementById('ajax-form').submit();" aria-hidden="true" href="javascript:{}" style="color:#fd8809"></a>
{!! Form::close() !!}

这是 Ajax:

$("#ajax-form").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        type: "post",
        url: "{{ url('addFavorites') }}",
        dataType: "json",
        data: form.serialize(),
        success: function(data){
            if(data.status == 'failedd'){
              swal("Error!", "You have already added this campaign to favorites! If you want to remove it, go to your Favorites list page", "error")
            }
            else{
            swal("Success!", "You added the campaign "+ data.idCampaign + " to favorites!", "success")
          }
        },
        error: function(data){
            swal("Error!", "error")
        },
        complete: function (data) {
     }
    });
});

当我单击此链接时，它会将我重定向到另一个页面，该页面抛出:MethodNotAllowedHttpException。

Answer 1

将您的 ajax url 更改为:

url: '/addFavorites',

以及您到达此的路线:

Route::post('/addFavorites', 'SearchController@addFavorites');

只是为了确保您指向相同的网址

EDIT:

确保您有一个使用 get 的路由以及使用 post 的相同路由。见下文:

路线::get('/addFavorites', 'SearchController@loadFavorites'); <-加载页面

路线::post('/addFavorites', 'SearchController@submitFavorites'); <-提交数据

1. 更改此:$("#ajax-form").submit(function(event) {

   为此:$('#yourid').click(function(){

2. 删除“a”元素中的 onclick 并添加带有您想要的名称的 id='yourid'。