Question

我想为我的Yii2项目创建一个Widget，它将基于View中给出的一些参数创建一个AJAX调用来更新我的View的一部分。

基本上我有一个邮政编码字段，更新时会在不同的PHP文件中查找相应的城镇。我创造了一些有用的东西，但我想知道这是否是正确（或唯一？）方式来做我正在寻找的东西。我不想重写AJAX调用，因为我希望能够在我的项目中的多个表单和字段中重用此功能。

我在我的视图中调用Widget：

<?= SearchWidget::Widget(['id' => 'customerform-postalcode', 
                          'dataTarget' => 'cities',
                          'targetId' => 'customerform-city',
                          'targetType' => 'dropdown']);?>

在Widget中我基本上只有一个run（）函数，它回显了对页面的AJAX调用。

public function run()
{   
    $jScript = 
        '<script>'
            . '$("#' . $this->id . '").change(function(){'
                .'$.ajax({'
                    . 'url: "../scripts/search.php",'
                    . 'data: {'
                        . 'needle: $("#' . $this->id . '").val(),'
                        . 'haystack: "' . $this->dataTarget . '"'
                    . '},'
                    . 'type: "POST"'
                . '}).done(function(data){'
                    .'var targetType = "' . $this->targetType . '";'
                    .'if (targetType=="dropdown") {'
                        . '$("#' . $this->targetId . '").empty();'
                        . 'var obj = jQuery.parseJSON(data);'
                        . '$.each(obj, function(key, value) {'
                            . '$("#' . $this->targetId . '").append("<option>" + value + "</option>");'
                        . '});'
                    . '} else {'
                        . 'var obj = jQuery.parseJSON(data);'
                        . '$("#' . $this->targetId . '").val(obj);'
                    . '}'
                . '});'
            . '})'
        .'</script>';
    echo $jScript;
}

首先，我刚刚开始使用Yii和框架，所以我真的不确定这是否是正确的方法。我的第一直觉说这太混乱了，应该有更好的方法来做到这一点。任何帮助表示赞赏。

Answer 1

我个人不喜欢在我的PHP文件中编写JS代码。所以我会尝试将JS放在一个单独的.js文件中。

我会更改我的SearchWidget以回显输入字段，其中包含一些其他属性，这些属性将为JavaScript提供正确的变量。所以我的邮政编码输入字段看起来像：

<input type="text" name="postcode" id="postcode" class="search-field" data-target="cities" data-targetid="customerform-city" data-targettype="dropdown" />

然后你可以将你的JS重写为下面的内容（未经测试）。

$('.search-field').change(function() {
    var id = $(this).attr('id');
    var data_target = $(this).data('target');
    var target_id = $(this).data('targetid');
    var target_type = $(this).data('targettype');

    $.ajax({
        url: "../scripts/search.php",
        data: {
            needle: $("#" + id).val(),
            haystack: data_target
        },
        type: "POST"
    }).done(function(data) {
        if (target_type == "dropdown") {
            $("#" + target_id).empty();
            var obj = $.parseJSON(data);
            $.each(obj, function(key, value) {
                $("#" + target_id).append("<option>" + value + "</option>");
            });
        } else {
            var obj = $.parseJSON(data);
            $("#" + target_id).val(obj);
        }
    });
});

然后将此JS文件放在某处并在小部件的init部分注册。

从Yii2中的Widget内部调用AJAX？

1 个答案: