更新

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-string（more to read here）所必需的。

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

Answer 2

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

以下是处理您的代码。

当用户点击update_button时，您向your_target_url发送ajax请求data，当ajax请求成功时，您会显示警告。

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

在ajax编辑上显示弹出消息

更新

更新2

2 个答案:

更新