如何使用JSON数据填充dropdownlist作为jQuery中的ajax响应 [英] How to populate dropdownlist with JSON data as ajax response in jQuery
问题描述
我正在开发一个j2ee应用程序。在我的应用程序中，我有一个下拉列表（或选择元素）。我想用JSON数据填充这个下拉列表作为Ajax响应。
I am working on a j2ee application. In my application I have a drop-down list(or Select element). I want to populate this drop-down list with JSON data as a Ajax response.
下面是我的代码：
生成JSON响应的服务器端代码（json_source.java）。 ：
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
}
}
以及通过上述服务器端代码成功生成的JSON数据：
{
"aaData": [{
"value": "login1",
"text": "kapils"
}, {
"value": "login2",
"text": "davidn"
}, {
"value": "login3",
"text": "alanp"
}]
}
和以下是我的客户端代码（source1.jsp），它生成ajax请求：
（使用$ .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>
或使用（$ .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');
});
});
现在，当我点击按钮（#id_trial）时，服务器端代码成功执行，因此JSON对象已创建。 但是我没有在使用jQuery的ajax调用的Success参数的回调函数中获得JSON响应。
Now when I clicked on button (#id_trial), the server side code executes successfully and as a result JSON object created. but i am not getting that "JSON response" in callback function of Success parameter using jQuery's ajax call.
除了jQuery之外ajax调用我也尝试用 $。getJSON 函数来接收JSON响应..但我没有得到JSON数据。
and apart from jQuery's ajax call I also tried with $.getJSON function to receive JSON response..but I didn't get JSON data.
所以请告诉我代码中是否有任何错误，以及如何使用上面的代码获取JSON数据并填充下拉列表。
我想使用ajax响应用JSON数据填充我的下拉列表。
请帮我解决这个问题......对我的应用来说非常紧急。
I want to populate my dropdownlist with JSON data using ajax response. please help me to sort out this problem...its very urgent for my application.
推荐答案
尝试更改jquery方法变量，可能会导致问题（即你使用的是 data 来自ajax回调PLUS的变量然后尝试将其分配给jquery方法中的 item 对象 - 更改为 obj ）：
try to change the jquery method variable, it might be causing the problem (i.e., you are using the data variable coming from the ajax callback PLUS are then trying to assign it to the item object in the jquery method - changed to 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');
});
}
});
});
这篇关于如何使用JSON数据填充dropdownlist作为jQuery中的ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
