如何在jQuery中使用JSON数据填充dropdownlist作为ajax响应

kit*_*its 13 javascript java ajax jquery json

我正在开发一个j2ee应用程序.在我的应用程序中,我有一个下拉列表(或选择元素).我想用JSON数据填充这个下拉列表作为Ajax响应.

以下是我的代码:

服务器端代码(json_source.java),它生成JSON响应.:

package demo.model;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.*;

/**
 * Servlet implementation class json_source
 */
public class json_source extends HttpServlet {
private static final long serialVersionUID = 1L;


/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{
    JsonArray data_json=new JsonArray();

    Statement st_loginId=null;
    ResultSet rs_loginId=null;
    try
    {
        Connection con=null;

        Class.forName("oracle.jdbc.OracleDriver");

        /* Connection String for "OPERWH"(exadata) Database */
        con=DriverManager.getConnection("jdbc:oracle:thin:*************","*****","*****");

        con.setAutoCommit(true);

        st_loginId=con.createStatement();
        rs_loginId=st_loginId.executeQuery("select login_id \"LOGIN ID\" from user_access");
        //System.out.println("entered in frame_login_code"); 
        int login_val=0;
        JsonObject json_response=new JsonObject();

        while(rs_loginId.next())
        {   
            login_val++;
            JsonObject json=new JsonObject();
            json.addProperty("value", "login"+login_val);
            json.addProperty("text", rs_loginId.getString(1));
            data_json.add(json);
        }
        System.out.println(data_json);
        json_response.add("aaData", data_json);

        response.setContentType("application/Json");

        response.getWriter().write(json_response.toString());

        System.out.println(json_response);
    }
    catch(Exception ex)
    {   
        System.out.println("Exception occured during retrieval of Login_Id in ComboBox :"+ex);
        ex.printStackTrace();
    }
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
}

}
Run Code Online (Sandbox Code Playgroud)

以及通过上述服务器端代码成功生成的JSON数据:

{
    "aaData": [{
        "value": "login1",
        "text": "kapils"
    }, {
        "value": "login2",
        "text": "davidn"
    }, {
        "value": "login3",
        "text": "alanp"
    }]
}
Run Code Online (Sandbox Code Playgroud)

以下是生成ajax请求的客户端代码(source1.jsp):

(使用$ .ajax()):

<script type="text/javascript">
$(document).ready(function() 
{ 
$('#id_trial').click(function() {

    alert("entered in trial button code");

    $.ajax({
        type: "GET",
        url:"/demo_trial_application/json_source",
        dataType: "json",
        success: function (data) {
            $.each(data.aaData,function(i,data)
            {
             alert(data.value+":"+data.text);
             var div_data="<option value="+data.value+">"+data.text+"</option>";
            alert(div_data);
            $(div_data).appendTo('#ch_user1'); 
            });  
            }
      });
    });
});

</script>

<body>

<div id="div_source1">
    <select id="ch_user1" >
        <option value="select"></option>
    </select>
</div>
<input type="button" id="id_trial" name="btn_trial" value="Trial Button..">
</body>
Run Code Online (Sandbox Code Playgroud)

或使用($ .getJSON()):

$.getJSON("/demo_trial_application/json_source", function (data) {
    $.each(data.aaData, function (i, data) {
        var div_data = "<option value=" + data.value + ">" + data.text + "</option>";
        alert(div_data);
        $(div_data).appendTo('#ch_user1');

    });
});
Run Code Online (Sandbox Code Playgroud)

现在,当我单击按钮(#id_trial)时,服务器端代码成功执行,因此创建了JSON对象.但我没有在使用jQuery的ajax调用的Success参数的回调函数中获得"JSON响应".

除了jQuery的ajax调用之外,我还尝试使用$.getJSON函数来接收JSON响应.但是我没有得到JSON数据.

所以请告诉我我的代码是否有任何错误,以及如何使用上面的代码获取JSON数据并填充下拉列表.

我想使用ajax响应使用JSON数据填充我的下拉列表. 请帮我解决这个问题......我的申请非常紧急.

raj*_*wat 20

尝试更改jquery方法变量,它可能导致问题(即,您正在使用data来自ajax回调PLUS 的变量然后尝试将其分配给itemjquery方法中的对象 - 更改为obj):

        $.ajax({
            type: "GET",
            url:"/demo_trial_application/json_source",
            dataType: "json",
            success: function (data) {
                $.each(data.aaData,function(i,obj)
                {
                 alert(obj.value+":"+obj.text);
                 var div_data="<option value="+obj.value+">"+obj.text+"</option>";
                alert(div_data);
                $(div_data).appendTo('#ch_user1'); 
                });  
                }
          });
        });
Run Code Online (Sandbox Code Playgroud)