Ajax

#Phoenix.Ajax

Phoenix.Ajax object is a jQuery ajax wrapper, to include it, use:

PhoenixScript::ajax();

The CSRF token will auto injected to this object, just use it as a http client.

Phoenix.Ajax.get('flower/sakura/1')
    .done(function (response, status, jqHXR) {
        // ...
    }).fail(function (jqHXR, status, error) {
        // ...
    }).always(function () {
        // ...
    });

Use other methods:

Phoenix.Ajax.get('flower/sakura/1', data, headers).done(...).fail(...);
Phoenix.Ajax.post('flower/sakura', data, headers).done(...).fail(...);
Phoenix.Ajax.put('flower/sakura/1', data, headers).done(...).fail(...);
Phoenix.Ajax.patch('flower/sakura/1', data, headers).done(...).fail(...);
Phoenix.Ajax.delete('flower/sakura/1', data, headers).done(...).fail(...);
Phoenix.Ajax.head('flower/sakura/1', data, headers).done(...).fail(...);
Phoenix.Ajax.options('flower/sakura/1', data, headers).done(...).fail(...);

Add jQuery ajax options to forth argument:

Phoenix.Ajax.post('flower/sakura', data, headers, {dataType: 'xml'})
    .done(...)
    .fail(...);

Use request():

Phoenix.Ajax.request('POST', 'flower/sakura', data, headers, options)
    .done(...)
    .fail(...);

#Override Methods

To override HTTP method with X-HTTP-Method-Override or _method parameter, use .customMethod() chain.

Phoenix.Ajax.customMethod()
    .put('flower/sakura/1')
    .done(...)
    .fail(...);

#Set Custom Headers

Phoenix.Ajax.headers.POST['X-Foo'] = 'Bar';

This header will always send with every request.

#Integrate JsonApiTrait

Add JsonApiTrait to controller:

class GetController extends AbstractController
{
    use JsonApiTrait;

    // ...

    public function doExecute()
    {
        $this->addMessage('Hello');

        return ['foo' => 'bar'];
    }
}

Now your JSON return will format with this:

{success:true,code:200,message:"Hello",data:{foo:"bar"}}

If you throw exceptions in controller:

class GetController extends AbstractController
{
    use JsonApiTrait;

    // ...

    public function doExecute()
    {
        throw new \RuntimeException('Something error', 403);

        return ['foo' => 'bar'];
    }
}

The return JSON will be:

{"success":false,"code":403,"message":"Something error","data":{"backtrace":...}}

So you can check API status in JS:

Phoenix.Ajax.get('flower/sakura/1')
    .done(function (response, status, jqHXR) {
        if (response.success) {
            console.log(response.data);
        } else {
            throw new Error(response.message);
        }
    });

#Use Vue Resource

See Vue Resource

#Integrate with Router

See Phoenix.Router

#Add CSRF Token

If you want to protect your application in ajax call, you can use this method to add form token.

\Phoenix\Script\CoreScript::csrfToken();

This method will add a meta tag to HTML <nead>

<meta name="csrf-token" content="a7d71a2c21743d8865fdfa61b71b29e8" />

Now you can fetch this token by JS, for example, we can add a param to jQuery ajaxSetup:

jQuery.ajaxSetup({
    headers: {
        'X-Csrf-Token': jQuery('meta[name="csrf-token"]').attr('content')
    }
});

#Auto add ajaxSetup

Use this code to auto add ajaxSetup:

JQueryScript::csrfToken();

If you found a typo or error, please help us improve this document.