AJAX多重回复

Question

I'm diving into JavaScript and AJAX technologies now, and I understand AJAX and POST well with it. Now I wonder whether there's something like a broadcasting channel that my PHP code (in this case, Laravel controller) broadcast to, which then is received by JavaScript on the client side in order to manipulate something, say a process like this:

User clicks a button, a spinner is shown inside the button. Next to the button, there's a status label indicating the current process/task being processed. Finally, the button becomes a link or something else. So, what I want now is that I can update the status multiple times, since my current AJAX code will only receive one message, or one status, at the end of the process and that's it, nothing in between:

$.ajax({
   url: "/admin/test",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    method: 'POST',
    dataType: 'json',
    data: {
        id: whatever
    },
    success: function(result)
    {
        console.log(result.status);
    }
});

Now I wonder how this further works.

Answer 1

You can make use of beforeSend event of ajax and use to start a progress bar and when it completes you can make progress bar width to 100%

$.ajax({
    url: "/admin/test",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    method: 'POST',
    dataType: 'json',
    data: {
        id: whatever
    },
    beforeSend : {
        // start progress bar
    },
    success: function(result)
    {
        console.log(result.status);
        // complete progress bar
    }
 });

Additionally, you could use css to apply transition to give the feeling the of progress in progress bar.