Ajax Call to append a div not working

Question

I'm actually new to ajax and jquery, and I've started working on it only a few days ago. I have a jsp code like this :

    <label>Choose the type of procedure you want :</label>
    <select id="proc-type" name="proc-type">
    <option value="selection">Select</option>
    <option value="with-param">With parameters</option>
    <option value="without-param">Without parameters</option>
    </select>

    <div class="drop" id="dropdown">
    <label> Select Procedure (with parameters) : </label>
     <select id="combobox" name="combobox">
     <option>Proc1</option
      <option>Proc2</option>
       ...
       ...
    </select>
    </div>

    <div class="drop" id="drop">
    <label> Select Procedure (without parameters) : </label>
     <select id="combobox2" name="combobox2">
     <option>Proc a</option
      <option>Proc b</option>
       ...
       ...
    </select>
    </div>

<div id="response"></div>

Now, these values are sent to a servlet and a html response is generated. The ajax call I used is :

if first dropdown changes :

document.getElementById("combobox").onchange = function(){
          var proc_type = document.getElementById("proc-type").value ;
          var username = document.getElementById("combo").value ;
          var proc_name1 = document.getElementById("combobox").value ;
          var proc_name2 = document.getElementById("combobox2").value ;
         console.log("before calling servlet ");
            $.ajax({
           url : "DBConnectServlet?user="+username+"&proc-type="+proc_type+"&combobox="+proc_name1+"&combobox2="+proc_name2,
           type : "GET",
           dataType:"text/html",
           success: function (data) {
               console.log("in ajax "+ data);
                  $('#response').html(data);
               }
      });
      };

if second dropdown changes :

document.getElementById("combobox2").onchange = function(){
              var proc_type = document.getElementById("proc-type").value ;
              var username = document.getElementById("combo").value ;
              var proc_name1 = document.getElementById("combobox").value ;
              var proc_name2 = document.getElementById("combobox2").value ;
             console.log("before calling servlet ");
                $.ajax({
               url : "DBConnectServlet?user="+username+"&proc-type="+proc_type+"&combobox="+proc_name1+"&combobox2="+proc_name2,
               type : "GET",
               dataType:"text/html",
               success: function(data) {
                   console.log("in ajax "+ data);
                      $('#response').html(data);
                   }
          });
          };

But problem is, the response is generated fine, but the div is not getting appended. Can anybody help ? Even if there is some other way to do it, please suggest.

Answer 1

尝试将dataType更改为“ text”或“ html”。jQuery手册中没有关于dataType.ajax的“ text / html”。祝您好运。