Ajax调用追加div无效

时间:2014-03-12 06:23:39

标签: javascript jquery ajax html5 jsp

我实际上是ajax和jquery的新手,而且我几天前才开始研究它。我有一个像这样的jsp代码:

    <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>

现在,这些值被发送到servlet并生成html响应。我使用的ajax调用是:

如果第一次下拉列表更改:

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);
               }
      });
      };

如果第二次下拉列表更改:

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);
                   }
          });
          };

但问题是,响应生成正常,但div没有被追加。有人可以帮忙吗? 即使有其他方法可以做,请建议。

1 个答案:

答案 0 :(得分:1)

尝试将dataType更改为&#34; text&#34;或&#34; html&#34;。没有&#34; text / html&#34;在jquery手册中关于dataType的ajax.Good运气。