README

这是yii2的一个ajax小部件，它将生成一个div。在这个div中点击标签（除了表单）或表单提交（对于具有data-ajax属性的标签和表单）将触发ajax请求。

链接示例

我们可以通过Ajax小部件使用ajax链接获取一些数据。首先，我们需要一个控制器和一个动作来渲染我们的视图。当然，我们可以使用SiteController作为我们的控制器。然后我们在SiteController中写一个名为actionLink的动作来渲染link.php。另外，添加一个名为actionResponse的动作来通过ajax链接响应ajax请求

SiteController.php

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;

public function actionLink()
{
    return $this->render('link');
}

public function actionResponse()
{
    return 'Success, this is your data.';
}
?>

link.php

<?php

use smallbearsoft\ajax\Ajax;
use yii\web\JsExpression;
use yii\helpers\Url;

Ajax::begin(['clientOptions' => [
    'success' => new JsExpression('function(data, textStatus, jqXHR) {alert(data)}'),
    'error' => new JsExpression('function(jqXHR, textStatus, errorThrown) {alert(errorThrown)}'),
    'beforeSend' => new JsExpression('function(jqXHR, settings) {alert("Before send.")}'),
    'complete' => new JsExpression('function(jqXHR, textStatus) {alert("Complete.")}'),
    'timeout' => 10000
]]) ?>
    <a href="<?= Url::to(['site/response']) ?>" data-ajax="1">This is an ajax link.</a>
<?php Ajax::end() ?>

表单示例

如果您想使用ajax将表单提交到服务器，您可以使用这个Ajax小部件使它变得简单。我们仍然将使用SiteController作为我们的控制器。然后我们添加两个动作actionForm和actionPost。为了简单起见，我们不会使用ActiveForm小部件，但您可以在代码中使用它

SiteController.php

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;

public function actionForm()
{
    return $this->render('form');
}

public function actionPost()
{
    if(isset($_POST['name']) && isset($_POST['age'])) {
        $name = $_POST['name'];
        $age = $_POST['age'];
        return "Success, name is $name and age is $age.";
    } else {
        return 'Success, but we can not get the name and age.';
    }
}
?>

form.php

<?php

use smallbearsoft\ajax\Ajax;
use yii\web\JsExpression;
use yii\helpers\Url;

Ajax::begin(['clientOptions' => [
    'success' => new JsExpression('function(data, textStatus, jqXHR) {alert(data)}'),
    'error' => new JsExpression('function(jqXHR, textStatus, errorThrown) {alert(errorThrown)}'),
    'beforeSend' => new JsExpression('function(jqXHR, settings) {alert("Before send.")}'),
    'complete' => new JsExpression('function(jqXHR, textStatus) {alert("Complete.")}'),
    'timeout' => 10000
]]) ?>
    <form action="<?= Url::to(['site/post'])?>" method="post" data-ajax="1">
        <input type="text" name="name" value="Fangxin Jiang"/>
        <input type="text" name="age" value="22"/>
        <input type="submit" value="Submit"/>
    </form>
<?php Ajax::end() ?>

实际上，您也可以使用Ajax小部件上传文件，只需添加一个如<input type="file" name="image"/>的输入即可。您将在服务器上的$_FILES变量中看到您的文件。

更多教程

请参阅主页wiki以获取更多教程。

提示

要触发Ajax小部件，您可以使用提交按钮或jQuery submit()函数。但不能使用纯javascript submit()函数来触发它。您可以使用

<button type="submit">Submit</button> (In your form)
---OR---
$("#my-id").submit()

不能使用

document.getElementById("#my-id").submit()

安装

安装此扩展的首选方式是通过composer。

运行以下命令之一：

composer require smallbearsoft/yii2-ajax:*

或

"smallbearsoft/yii2-ajax": "*"

将其添加到您的composer.json文件的require部分。