Ajax request

Simple request

views/ajax/ajax.php

		echo Html::a('Click me', ['ajax/simple'], [
				'id' => 'ajax_link_01',
				'data-on-done' => 'simpleDone',
			]
		);
		echo Html::tag('div', '...', ['id' => 'ajax_result_01']);

		$this->registerJs("$('#ajax_link_01').click(handleAjaxLink);", \yii\web\View::POS_READY);

controllers/AjaxController.php

	public function init() {
		parent::init();

		$this->jsFile = '@app/views/' . $this->id . '/ajax.js';

		// Publish and register the required JS file
		Yii::$app->assetManager->publish($this->jsFile);
		$this->getView()->registerJsFile(
			Yii::$app->assetManager->getPublishedUrl($this->jsFile),
			['yii\web\YiiAsset'] // depends
		);
	}

controllers/AjaxController.php

	public function actionSimple() {
		if (Yii::$app->request->isAjax) {
			Yii::$app->response->format = Response::FORMAT_JSON;


			$res = array(
				'body'    => date('Y-m-d H:i:s'),
				'success' => true,
			);

			return $res;
		}
	}

views/ajax/ajax.js

function handleAjaxLink(e) {

	e.preventDefault();

	var
		$link = $(e.target),
		callUrl = $link.attr('href'),
		formId = $link.data('formId'),
		onDone = $link.data('onDone'),
		onFail = $link.data('onFail'),
		onAlways = $link.data('onAlways'),
		ajaxRequest;


	ajaxRequest = $.ajax({
		type: "post",
		dataType: 'json',
		url: callUrl,
		data: (typeof formId === "string" ? $('#' + formId).serializeArray() : null)
	});

	// Assign done handler
	if (typeof onDone === "string" && ajaxCallbacks.hasOwnProperty(onDone)) {
		ajaxRequest.done(ajaxCallbacks[onDone]);
	}

	// Assign fail handler
	if (typeof onFail === "string" && ajaxCallbacks.hasOwnProperty(onFail)) {
		ajaxRequest.fail(ajaxCallbacks[onFail]);
	}

	// Assign always handler
	if (typeof onAlways === "string" && ajaxCallbacks.hasOwnProperty(onAlways)) {
		ajaxRequest.always(ajaxCallbacks[onAlways]);
	}

}

views/ajax/ajax.js

	'simpleDone': function (response) {
		// This is called by the link attribute 'data-on-done' => 'simpleDone'
		console.dir(response);
		$('#ajax_result_01').html(response.body);
	}

Sending form data

Note: common code is share with the "Simple request" example

views/ajax/ajax.php

		echo Html::beginForm('', 'post', ['id' => 'link_form']);

		echo "<div>" . Html::label('Name', 'name') . " "
			. Html::textInput('name', null, ['id' => 'name']) . "</div>";

		echo "<div>" . Html::label('E-mail', 'email') . " "
			. Html::input('email', 'email', null, ['id' => 'email']) . "</div>";

		echo Html::a('Click me', ['ajax/link-form'], [
				'id' => 'ajax_link_02',
				'data-on-done' => 'linkFormDone',
				'data-form-id' => 'link_form',
			]
		);

		echo Html::endForm();

		echo Html::tag('pre', '...', ['id' => 'ajax_result_02']);

		$this->registerJs("$('#ajax_link_02').click(handleAjaxLink);", \yii\web\View::POS_READY);

controllers/AjaxController.php

	public function actionLinkForm() {
		if (Yii::$app->request->isAjax) {
			Yii::$app->response->format = Response::FORMAT_JSON;


			$res = array(
				'body'    => print_r($_POST, true),
				'success' => true,
			);

			return $res;
		}
	}

views/ajax/ajax.js

	'linkFormDone': function (response) {
		// This is called by the link attribute 'data-on-done' => 'linkFormDone';
		// the form name is specified via 'data-form-id' => 'link_form'
		$('#ajax_result_02').html(response.body);
	}