Ajax 调用附加 div 不起作用答案

【问题标题】：Ajax Call to append a div not workingAjax 调用附加 div 不起作用
【发布时间】：2014-04-16 02:48:38
【问题描述】：

我实际上是 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 没有被附加。有人可以帮忙吗？即使有其他方法，也请提出建议。

【问题讨论】：

如果要追加数据，请使用$(data).appendTo($('#response'));
而不是 $('#response').html(data); 尝试 $('#response').append(data); 将在 div 中附加数据 id=response
你得到服务器的正确响应了吗？您在浏览器中看到控制台了吗？
@AwladLiton ：是的，我可以在我的萤火虫控制台中看到响应。问题出在数据类型上。当我将其更改为 html 而不是 text/html 时，它工作正常

标签： javascript jquery ajax html jsp

【解决方案1】：

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

【讨论】：

是的..我明白了..当我将其更改为 html 时它起作用了。无论如何感谢您的建议。