web2py中Ajax调用完成后如何执行后续代码？

问题场景 #

表单中有两个下拉选择组件，通过web2py的ajax()函数调用更新第二个下拉的选项，Ajax能成功更新选项，但之后设置下拉值的代码完全不生效。

问题原因 #

web2py的ajax()默认是异步执行的，你写在Ajax调用后面的jQuery('#no_table_branch_id').val(branch_id)会在Ajax请求还没完成、下拉选项还没更新时就执行，这时候新的选项还没加载，设置值的操作自然无效。

解决方案 #

利用web2py ajax()函数的回调参数，将需要在Ajax完成后执行的代码放到回调函数里，确保只有当下拉选项更新完成后，再执行设置值的操作。

web2py的ajax()函数支持第四个参数作为成功回调：

ajax(url, [args], target, callback)

修改后的视图代码 #

{{extend 'layout.html'}}
<h1>{{=title}} /This is the library/edit_user.html template</h1>
{{=grid}}

<script>
    jQuery("#no_table_region_id").change(function(){
        var region_id = $(this).val();
        var branch_id = jQuery('#no_table_branch_id').val();
        // 增加回调函数，在Ajax完成后设置分支ID
        ajax("{{=URL('library', 'branches')}}?region_id=" + region_id, [], 'no_table_branch_id', function() {
            jQuery('#no_table_branch_id').val(branch_id);
        });
    });

    jQuery(document).ready(function(){
        jQuery("#no_table_region_id").change();
    });
</script>

额外优化建议 #

• 给变量加上var（或let/const）声明，避免全局变量污染；
• 可以在回调里判断branch_id是否存在，避免设置空值：

  if (branch_id) {
      jQuery('#no_table_branch_id').val(branch_id);
  }
  

内容的提问来源于stack exchange，提问作者JeffP