從Yii2的小部件內部調用AJAX？

Question

我想為我的Yii2項目創建一個小部件，該小部件將基於View中給出的一些參數創建一個AJAX調用，以更新部分View。

基本上，我有一個Postcode字段，更新后將在另一個PHP文件中查找相應的城鎮。 我創建了一些可行的方法，但我想知道這是否是正確的方法（或僅此方法？），以完成我要尋找的工作。 我不想重寫AJAX調用，因為我希望能夠在幾種表單上以及項目中的字段上重用此功能。

我這樣在視圖中調用小部件：

<?= 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部分。