使用 ajax 从 servlet 填充下拉列表答案

【问题标题】：To fill a dropdown from servelet using ajax使用 ajax 从 servlet 填充下拉列表
【发布时间】：2013-05-07 09:16:12
【问题描述】：

我需要使用 ajax 从数据库中填充一个下拉列表，我使用两个下拉列表，如果选择了第一个下拉值，则选择第二个下拉值（必须根据第一个下拉列表中选择的值从数据库中检索) 必须显示。 DAO（数据访问层）返回4个结果作为arraylist对象，但在http responsetext中它打印为对象而不是值。我尝试使用for循环来迭代它，但我无法实现它。请协助我。

HTML 代码：

    // First Drop Down
    Question Field :<select name="ddlAddQuestionField" id='ddlAddQuestionField' onchange="getFieldPosition()">
        <option value=''>Select Question Field</option>
        <option value='Security Question'>Security Question</option>
        <option value='Personal Info'>Personal Info</option>
    </select>

    // Second DropDown

    User Field Position:<select name="userFieldPosition" id="userFieldPosition" disabled="disabled"> </select>

Javascript 代码

function getFieldPosition(){

                    var fieldName =$("#ddlAddQuestionField").val();

                    if(window.XMLHttpRequest){
                        xmlhttp=new XMLHttpRequest();
                    } else {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function() {

                        if(xmlhttp.readyState==4 && xmlhttp.status==200){

                            document.getElementById("userFieldPosition").disabled=false;                            
                            alert(xmlhttp.responseText);
                            var response =xmlhttp.responseText;

                            for(var i=0;i<response.length;i++) {
                                var elements = "<option value='"+response[i]+"'>"+response[i]+"</option>";
                                $("#userFieldPosition").append(elements);
                            }
                        }
                      }
                        xmlhttp.open("POST","ApplicationController",true);
                        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                        xmlhttp.send("fieldAction=fieldPosition&fieldName="+fieldName);
                }

Servelet 代码

fieldPositionObj = fieldPositionDaoObj.getFieldPosition(fieldName);   //Hitting the Dao

              // In dao it returns arraylist object.     

            response.setContentType("text/plain");  
                response.setCharacterEncoding("UTF-8"); 
                response.getWriter().write(fieldPositionDaoObj);

【问题讨论】：

标签： java javascript html ajax jsp

【解决方案1】：

有一些框架，例如 ExtJs，可以让您在没有太多代码的情况下完成这项工作。我能想到的唯一方法是将第二个下拉框放在div 标签内。在选择第一个下拉框时，调用将发出 ajax 请求的函数。获得success 响应后，通过创建具有这些值的新下拉框来重写div 的内容。

【讨论】：

我没有得到我只得到的值“(com.bean.QuestionInfoBean@23d275, com.bean.QuestionInfoBean@1ce15f6, com.bean.QuestionInfoBean@103fcaa, com.bean.QuestionInfoBean@c135d6) “ 这。（确切的值是 First,Middle,Full,Last）
那是因为你是直接写对象。使用System.out.println() 检查您在ArrayList 中获得的值。
另外，您不会覆盖ArrayList 的toString()。您返回的数据可能不是所需的格式。
使用 ajax 调用。这是从 servlet 获取数据的最简单方法。

【解决方案2】：

你的问题是线

 response.getWriter().write(fieldPositionDaoObj);

你是在响应上直接写java Obejct..我认为fieldPositionDaoObj是列表或数组..所以toString表示是

(com.bean.QuestionInfoBean@23d275, com.bean.QuestionInfoBean@1ce15f6, com.bean.QuestionInfoBean@103fcaa, com.bean.QuestionInfoBean@c135d6)

其中com.bean.QuestionInfoBean@c135d6 是 toString 表示你的 Java 对象。

我认为您需要返回 Java 对象/列表/数组的 JSON 表示，并且您的代码可以正常工作

JSON（JavaScript Object Notation），是一种简单易读的数据交换格式。它在全球无数项目中流行和实施，对于那些不喜欢 XML 的人来说，JSON 是一个非常好的替代解决方案。

您的 JSON 表示应该如下所示

[第一，中间，完整，最后]

或

[{First},{Middle},{Full},{Last}]

您可以编写自己的方法，例如 public String getJSOnRepresentation();

然后做

response.getWriter().write(fieldPositionDaoObj.getJSOnRepresentation());

Sample example on What and how to code

另见

http://json.org/java/ https://github.com/douglascrockford/JSON-java/blob/master/JSONString.java https://github.com/douglascrockford/JSON-java/blob/master/JSONArray.java https://github.com/douglascrockford/JSON-java/blob/master/JSONObject.java

【讨论】：

Gson gson = new Gson();字符串 json = new Gson().toJson(fieldPositionObj); response.getWriter().write(json);我试过这个，我得到了值，但是所有的 bean 类属性都被返回了（在 bean 类中我使用了太多的属性，所有这些属性都被返回了）。我只需要一处房产
Gson 库可以在code.google.com/p/google-gson 找到.. 它的智能库.. 所以它会写下你所有的值.. 你可以编写自己的实现来编写你需要的值
查看更新的答案（添加了新链接）...如果有帮助，请接受并支持答案:)

【解决方案3】：

我尝试了下面提到的代码，它现在工作正常。

JAVA 脚本：

  if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("userFieldPosition").disabled=false;                            
        var response = JSON.parse(xmlhttp.responseText);
        for(var i=0;i<response.length;i++){
            elements  += "<option value='"+response[i].fieldPosition+"'>"+response[i].fieldPosition+"</option>";
        }
        $("#userFieldPosition").append(elements);
        }
}

服务：

 Gson gson = new Gson();
 String json = new Gson().toJson(fieldPositionObj);
 response.getWriter().print(json);

【讨论】：