Ajax中不能够选择下拉列表中的某个值和为全局变量赋值的问题解决

1. 我们在开发的时候经常会使用到Ajax，但是有的时候会遇到一些问题，常见的问题是：不能够选择下拉列表的某一项值或者在Ajax中的函数中不能够为一个全局变量赋值

比如我们使用Bootstrap来弹出模态框，在模态框中包含着两个下拉列表，因为下拉列表的值是需要根据数据库的数据变化来进行动态显示的，所以在jsp页面要发送ajax请求到后台的控制器中来获取数据

像下面的例子：就是存在着两个模态框，在弹出编辑模态框之前我们需要根据学生的学号将学院信息与专业信息查询出来，而且

要正确显示当前学生的学院信息和专业的信息，所以在查询完数据库中所有的学院信息和专业信息的时候需要选中下拉列表的与当前学生对应的学院和专业信息，这些查询的操作都需要发送ajax请求来进行处理，但是由于发送的是ajax请求，所以它的默认方式是异步的操作，当我们调用完两个Jquery中两个发送ajax的查询信息的函数之后下拉列表还没有完全拼装出来，所以当我们尝试选择其中的值的时候会发现选择的往往是下拉列表的第一个值，好几次点击之后可能会显示正确的值，我们可以在选择下拉列表的值的时候先使用Jquery输出其中的下拉列表选中的值可以发现选中的值为null

究其原因，是因为ajax发送的是异步请求，没有等到它调用函数完毕，即下拉列表还没有拼装完全它就尝试赋值了所以导致不能够正确显示下拉列表的需要选中的值

调用查询学院和专业信息的函数如下：

function getAllInstitute(ele){
   $(ele).empty();
   $.ajax({
       url:"${APP_PATH}/getAllInstitute",
       async: false,
       type: "GET",
       success:function(result){
           $.each(result.map.institutes, function(){
               var option = $("<option></option>").append(this.instituteName).attr("value",this.instituteName);
               option.appendTo(ele);
           });
       }
   });
}

function getAllMajor(ele){
   $(ele).empty();
   $.ajax({
       url:"${APP_PATH}/getAllMajor",
       async: false,
       type: "GET",
       success:function(result){
           $.each(result.map.majors, function(){
               var option = $("<option></option>").append(this.majorName).attr("value",this.majorName);
               option.appendTo(ele);
           });
       }
   });
}

选中下来列表的函数如下：

function edit(stuId){
        updateStuId = stuId;
        $(".updateInstitute select").empty();
        $(".updateMajor select").empty();
        getAllInstitute("#update_institute");
        getAllMajor("#update_major");
       $.ajax({
           type : "POST",
           url : "${APP_PATH}/edit",
           data : {
               "stuId" : stuId
           },
           success : function(result){
               if(result.res){
                   $(".updateStuId").val(result.map.student.stuId);
                   $(".updateName").val(result.map.student.name);
                   $("#updateStudent input[name=gender]").val([result.map.student.gender]);
                   $(".updateAge").val(result.map.student.age);
                   $(".updateConnect").val(result.map.student.connect);

//选中下拉列表的某一项值
                   $("#update_institute").val(result.map.student.institute);
                   $("#update_major").val(result.map.student.major);
               }
           }
       });

解决的办法是将ajax的一步请求修改为同步请求，即在ajax函数中加上 async: false即可

2. 此外在ajax的函数中为某个全局变量赋值或者在ajax做其他的相关的操作都需要将异步请求修改为同步请求即可解决，因为它们是同一个道理

Ajax中不能够选择下拉列表中的某个值和为全局变量赋值的问题解决

猜你喜欢