javascript - 提交时切换表单 - jQuery (Ajax)

Question

我有一个表单可以将项目添加到收藏夹，也可以将其删除。

假设这是用于添加和删除的表单:

@if($checkIfFavIsAdded == 0)
    {!! Form::open(['id' => 'ajax-form-add', 'style' => 'float:right']) !!}
      ...
    <button class="fa fa-star-o fa-2x" tool-tip-toggle="tooltip-demo" id="addFavbutton" title="Add item to favorites" style="color:#fd8809"></button>
    {!! Form::close() !!}
@else
    {!! Form::open(['id' => 'ajax-form-delete', 'style' => 'float:right']) !!}
      ...
    <button class="fa fa-star-o fa-2x" tool-tip-toggle="tooltip-demo" id="addFavbutton" title="Delete item from favorites" style="color:grey"></button>
    {!! Form::close() !!}
@endif

在这里，我检查该项目是否已添加到收藏夹，如果是，则应显示适当的表单。它适用于页面重新加载，但我如何在 Ajax 中执行此操作？我尝试过隐藏和展示，但没有成功。它只是隐藏表单，不显示另一个表单。

<script type="text/javascript">
$("#ajax-form-add").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        type: "post",
        url: "{{ url('addFavorites') }}",
        dataType: "json",
        data: form.serialize(),
        success: function(data){
            $("#ajax-form-add").hide();
            $("#ajax-form-delete").show();
        },
        error: function(data){
            swal("Error!", "error")
        },
        complete: function (data) {
     }
    });
});
</script>

<script type="text/javascript">
   $("#ajax-form-delete").submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
          type: "post",
          url: "{{ url('deleteFavorites') }}",
          dataType: "json",
          data: form.serialize(),
          success: function(data){

              $("#ajax-form-delete").hide();
              $("#ajax-form-show").show();
          },
          error: function(data){
              swal("Error!", "Item is not available!", "error")
          }
      });
   });
</script>

Answer 1

Blade 模板在服务器端呈现，您想要做的是客户端。

如果您的 Blade 模板中有该条件，则渲染并发送到浏览器的标记将不包含其他表单。

您需要在 ajax 响应中返回要显示的标记(即新表单)。