在 ajax 编辑上显示弹出消息

Question

我想知道如何在用户更改字段并通过 AJAX 更新数据后显示弹出消息？

这是我的代码：

public function UpdateorderbuyerByAjax(Request $request) 
{
    try {
        $id = $request->input('pk');
        $field = $request->input('name');
        $value = $request->input('value');

        $order = Order::findOrFail($id);
        $order->{$field} = $value;
        $order->save();
    } catch (Exception $e) {
        return response($e->getMessage(), 400);
    }

    return response('', 200);
}

PS：使用Laravel 5。

更新

我的完整 java 脚本代码，只有当用户更改 // buyer update 部分时，我才需要向用户显示自定义消息。

<script type="text/javascript">
$(function() {

  $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // buyer update
    $('.user').editable({
        source: [
            @foreach($users as $user)
                { value: '{{ $user->id }}', text: '{{ $user->name }}' }
                @unless ($loop->last)
                    ,
                @endunless
            @endforeach
        ]
    });

    // update status
    $(function() {
      $('.status').editable({
          source: [
              @foreach($orderstatuses as $status)
                  { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                  @unless ($loop->last)
                      ,
                  @endunless
              @endforeach
          ]
      });
    });


    // transaction code
    product_id = $(this).data('pk');
    url = $(this).data('url');

    $('.transaction').editable({
      url: url,
      pk: product_id,
      type:"text",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });
});
</script>

更新 2

我的最新代码

<script type="text/javascript">
$(function() {

  $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
          alert(
            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam eius odio eum soluta atque voluptatibus ducimus, debitis corrupti! Enim pariatur voluptates, dolor doloremque dignissimos cum amet veritatis deleniti voluptatibus sunt!'
            );
        }
    });

    // buyer update
    $('.user').editable({
        source: [
            @foreach($users as $user)
                { value: '{{ $user->id }}', text: '{{ $user->name }}' }
                @unless ($loop->last)
                    ,
                @endunless
            @endforeach
        ]
    });

    // update status
    $(function() {
      $('.status').editable({
          source: [
              @foreach($orderstatuses as $status)
                  { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                  @unless ($loop->last)
                      ,
                  @endunless
              @endforeach
          ]
      });
    });


    // transaction code
    product_id = $(this).data('pk');
    url = $(this).data('url');

    $('.transaction').editable({
      url: url,
      pk: product_id,
      type:"text",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });
});
</script>

Answer 1

根据您的需要，您必须捕获来自服务器的响应。您执行此操作的方式实际上取决于您在前端进行 ajax 调用的方式（使用 jQuery、VueJS、Axios 等）。 使用 jQuery 这样的东西应该可以解决问题：

$.ajax({
    method: "POST",
    url: "some.php",
    data: { pk: 456, name: "John", value: "Boston" },
    statusCode: {
      400: function() {
        alert( "error" );
      }
    }
}).done(function( msg ) {
    alert( "Status updated!" );
}).fail(function() {
    alert( "error" );
});

更多关于Jquery $.ajax。

如果您将 Laravel 与 Axios（预装在 Laravel 5.5 中）一起使用，您的 ajax 调用可能如下所示：

axios.post('/your-url', {
    pk: 456,
    name: 'John',
    value: 'Boston'
}).then(function (response) {
    alert("Status updated!");
}).catch(function (error) {
    console.log(error);
});

更多关于axios。

更新

这是您应该使用的代码：

// buyer update
$('.user').editable({
    source: [
        @foreach($users as $user)
            { value: '{{ $user->id }}', text: '{{ $user->name }}' }
            @unless ($loop->last)
                ,
            @endunless
        @endforeach
    ]
});

$.ajax({
    method: "POST",
    url: "/your-target-url",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: JSON.stringify(source),
    statusCode: {
      400: function() {
        alert( "error" );
      }
    }
}).done(function( msg ) {
    alert( "Status updated!" );
}).fail(function() {
    alert( "error" );
});

现在直接在 ajax 调用中设置标题。 JSON.stringify 必须将您的数据数组转换为 json 字符串 (more to read here)。

现在您可以将代码包装在一些事件触发函数中（点击或其他）。

Answer 2

jQuery 在 AJAX 上有成功和错误的方法。您可以在here 上阅读更多相关信息。

以下是处理您的代码。

当用户单击update_button 时，您使用data 向your_target_url 发送ajax 请求，并且当ajax 请求成功时，您会显示警报。

$('update_button').click(function() {
  $.ajax({
    url: your_target_url,
    data: 'data',
    success: function (response) {
      // show your alter on here
    }
  });
});