Php 从Yii2中的小部件内部调用AJAX？

我想为我的Yii2项目创建一个小部件，它将基于视图中给出的几个参数创建一个AJAX调用，用于更新视图的一部分

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

我在视图中调用小部件，如下所示：

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

在这个小部件中，我基本上只有一个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;
}

公共函数运行（）
{   
$jScript=
''
.change（函数（）{'
“$.ajax（{”
.url:../scripts/search.php“
“数据：{”
.“针：$（“#”。$this->id.”）.val（），'
“'haystack:'.$this->dataTarget.””
. '},'
.“类型：“POST”
'.}）.done（函数（数据）{'
.'var targetType=“”.$this->targetType.”；'
.'if（targetType==“下拉列表”）{'
“$（“#”。$this->targetId.”）。空（）
.var obj=jQuery.parseJSON（数据）；'
'$.each（对象、函数（键、值）{'
“$（“#”。$this->targetId.”。追加（“+value+”）；”
. '});'
“}否则{”
.var obj=jQuery.parseJSON（数据）；'
.val（obj）；'
. '}'
. '});'
. '})'
.'';
echo$jScript；
}

---

首先，我刚刚开始使用Yii和框架，所以我真的不确定这是否是正确的方法。我的第一反应是这太混乱了，应该有更好的方法来做。非常感谢您的帮助。

我个人不喜欢在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（函数（）{
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”，
数据：{
指针：$（“#”+id）.val（），
haystack：数据_目标
},
类型：“职位”
}).完成（功能（数据）{
如果（目标类型=“下拉列表”）{
$（“#”+target_id）.empty（）；
var obj=$.parseJSON（数据）；
$。每个（对象、功能（键、值）{
$（“#”+target_id）.append（“+value+”）；
});
}否则{
var obj=$.parseJSON（数据）；
$（“#”+target_id）.val（obj）；
}
});
});

然后将这个JS文件放在某个地方，并将其注册到小部件的

init

部分

$('.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);
        }
    });
});