如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应
Posted
技术标签:
【中文标题】如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应【英文标题】：How to populate dropdownlist with JSON data as ajax response in jQuery 【发布时间】：2013-11-12 13:29:03 【问题描述】：我正在开发一个 j2ee 应用程序。在我的应用程序中，我有一个下拉列表（或选择元素）。我想用 JSON 数据填充这个下拉列表作为 Ajax 响应。
下面是我的代码：
生成 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"
]
以下是生成 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>
或使用 ($.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 响应”。
除了 jQuery 的 ajax 调用之外，我还尝试使用 $.getJSON 函数接收 JSON 响应..但我没有得到 JSON 数据。
所以请告诉我我的代码是否有任何错误，以及如何使用上述代码获取 JSON 数据并填充下拉列表。
我想使用 ajax 响应在我的下拉列表中填充 JSON 数据。 请帮我解决这个问题...这对我的申请非常紧迫。
【问题讨论】：
你在 firebug 中查看是否有客户端 json 到达？？ kits@ 我已经用 php json 数据检查了你的 ajax 代码，它工作正常。我正在使用 jQuery v1.10.2。我不认为 javascript 有错误。 检查 your.each() 循环 ***.com/questions/2342371/… 【参考方案1】：尝试更改 jquery 方法变量，这可能会导致问题（即，您正在使用来自 ajax 回调的 data 变量，然后尝试将其分配给 jquery 方法中的 item 对象- 改为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');
);
);
);
【讨论】：
Jim，在那种情况下，我已经尝试了 kits 代码并且工作正常，唯一的变化是，我使用 PHP 服务器端代码来生成 json 对象。它在地方上有很大的不同吗？你能指导我吗？【参考方案2】：我用“为”
var List;
jQuery.ajax(
url: "/demo_trial_application/json_source",
type: "POST",
dataType: "json",
async: false,
success: function (data)
List = data.aaData
$('#ch_user1').empty();
$('#ch_user1').append('<option value="">All</option>');
for (i in List )
$('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');
);
【讨论】：
【参考方案3】：使用 Laravel 这是我的解决方案：
$("#YOUR_DIV").on("change", function()
var selected = $(this).val();
makeAjaxRequest(selected);
)
function makeAjaxRequest(opts)
$.ajax(
type: "GET",
url : ' action('YOUR_CONTROLLER@YOUR_FUNCTION') ',
data: opts: opts ,
success: function(data)
NEW_JS_FUNCTION(data);
);
function NEW_JS_FUNCTION(params)
$('#YOUR_DIV').empty();
$('#YOUR_DIV').append('<option value="">ALL</option>');
params.forEach(function(entry)
$('#YOUR_DIV').append('<option value="' + entry.KEY+ '">' + entry.TEXT + '</option>');
);
它有效。希望这能有所帮助。
【讨论】：
【参考方案4】：我们可以像下面这样填充下拉列表。我想这对你们来说很容易。
var options = $("#options");
$.getJSON("/Country/GetAll/", function(response)
$.each(response, function()
options.append($("<option />").val(this.Id).text(this.Name));
);
);
【讨论】：
不错的附加单行！【参考方案5】：<div class="col-lg-4">
<%--<input type="text" class="form-control" id="txtGender" />--%>
<select class='form-control DropDown' id="txtGender"></select>
</div>
--------------------------------------------------------------------------------
$(document).ready(function ()
$.ajax(
type: "POST",
url: "AjaxCallGrid.asmx/GetDropDown",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result)
$('.DropDown').empty();
$('.DropDown').append("<option value='0'>---Select---</option>");
$.each(result.d, function (key, value)
$('.DropDown').append($("<option></option>").val(value.iD).html(value.firstName));
);
);
);
-------------------------------------------------------------------------
[WebMethod]
public List<Students> GetDropDown()
DataTable dt = new DataTable();
List<Students> result = new List<Students>();
using (SqlConnection con = new SqlConnection(@"Data Source=DOS-PC\MARJI;Initial Catalog=examples;Integrated Security=True"))
using (SqlCommand cmd = new SqlCommand("select id,firstname from Students ", con))
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
for (int i = 0; i < dt.Rows.Count; i++)
result.Add(new Students
iD = Convert.ToInt32(dt.Rows[i]["id"].ToString()),
firstName = dt.Rows[i]["firstname"].ToString()
);
return result;
【讨论】：
【参考方案6】：最简单的方法是下载这个库https://github.com/JocaPC/jquery-view-engine/tree/master/src。这个 JQuery 库直接将 JSON 加载到 dropdows 中，看起来与您的示例完美匹配。您只需要输入以下代码：
success: function (data)
$('#ch_user1').view(data.aaData);
查看此页面https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown了解更多详情。
【讨论】：
【参考方案7】：如下尝试
<select id="xxx"></select>
success: function (response)
for (var i = 0; i < response.length; i++)
$("#xxx").append("<option value='" + response[i]["id"] + "'>" + response[i]["name"] + "</option>");
【讨论】：
【参考方案8】：你可以这样做：
$(".ddEvent").on('change', function(e)
const selectedEvent = $(this).val();
$("#ddExhibitor").empty();
$("#ddExhibitor").append("<option value='-1'>-- Choose Exhibitor --</option>");
$.ajax(
url: '/dashboard/get-exhibitors/'+selectedEvent,
type: 'GET',
success: function success(data)
if(data.exhibitors.length > 0)
data.exhibitors.forEach(exhibitor =>
$("#ddExhibitor").append("<option value='" + exhibitor.id + "'>" + exhibitor.exhibitor_name + "</option>");
);
,
error: function error(err)
alert(data.error);
);
);
【讨论】：
以上是关于如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应的主要内容，如果未能解决你的问题，请参考以下文章
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 的级联下拉