Javascript jQuery隐藏ajax优化 jQuery（'select[field]'）。每个函数（）{ var jobj=$（本）； var pre_field_name=jobj.attr（'filtered_by'）； var parent_field_name=jobj.attr（'field'）； var data_url=jobj.attr（'data-url'）； var val=jobj.val（）； $（'select[name='+parent_field_name+']'）。更改（函数（）{ console.log（'change'）； if（$（this.val（））{ log（'ajax'）； $.get（data_url，{'pk'：$（this）.val（）}，函数（response）{ console.log（'response'）； var选项=“”； 对于（变量i=0；i

如果我的页面上有3个元素满足这个

jQuery（'select[field]'）

selector-那么，在chrome日志中，我将看到六个元素（我猜是

.change（）

的两倍）

response

日志记录。但是在chrome控制台的

network

选项卡和服务器日志中，我看到只有一个请求。原因是什么？

你也可以发布你的html吗

我建议您在一个jquery选择器中选择父属性。参见示例

Html:

测试
测试2

这不是隐藏的优化，而是缓存http响应的行为

隐藏物 如果设置为false，它将强制请求的页面不被 浏览器注意：将缓存设置为false只能在 去接请求。它通过将“={timestamp}”附加到 获取参数。对于其他类型的对象，不需要该参数 请求，但在IE8中，当向已发布的URL发布帖子时除外 被一个GET请求

jQuery('select[field]').each(function(){
    var jobj = $(this);
    var pre_field_name = jobj.attr('filtered_by');
    var parent_field_name = jobj.attr('field');
    var data_url =jobj.attr('data-url');
    var val = jobj.val();
    $('select[name='+parent_field_name+']').change(function(){
        console.log('change');
        if($(this).val()){
            console.log('ajax');
            $.get(data_url, {'pk': $(this).val()}, function(response){
                console.log('response');
                var options = '';
                for (var i = 0; i < response.length; i++) {
                    options += '<option value="' + response[i].value + '" '+  (val==response[i].value?'selected="selected"':'') +  '>' + response[i].display + '</option>';
                }
                jobj.html(options);
                jobj.change();
            })
        } else {
            jobj.html('<option value="">------</option>');
            jobj.change();
        }
    }).change();

})

$("div[parent_field_name='test'] select").change(function(){
    var data_url = 'ajaxUrl';

    console.log('ajax');
    $.get(data_url, {'pk': $(this).val()}, function(response){
        console.log('response');
    });
}).change();

<div class="parent" parent_field_name="test">
<select>
    <option>test</option>
    <option>test2</option>
</select>
</div>