如何使用JSON数据填充dropdownlist作为jQuery中的ajax响应
我正在研究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 } } 以及通过上述服务器端代码成功生成的JSON数据：
{ "aaData": [{ "value": "login1", "text": "kapils" }, { "value": "login2", "text": "davidn" }, { "value": "login3", "text": "alanp" }] }
以下是生成ajax请求的客户端代码（source1.jsp）：
（使用$ .ajax（））：
$(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=""+data.text+""; alert(div_data); $(div_data).appendTo('#ch_user1'); }); } }); }); });
或使用（$ .getJSON（））：
$.getJSON("/demo_trial_application/json_source", function (data) { $.each(data.aaData, function (i, data) { var div_data = "" + data.text + ""; alert(div_data); $(div_data).appendTo('#ch_user1'); }); });
现在，当我单击按钮（#id_trial）时，服务器端代码成功执行，因此创建了JSON对象。 但我没有在使用jQuery的ajax调用的Success参数的回调函数中获得“JSON响应”。
除了jQuery的ajax调用之外，我还尝试使用$.getJSON函数来接收JSON响应。但是我没有得到JSON数据。
所以请告诉我我的代码是否有任何错误，以及如何使用上面的代码获取JSON数据并填充下拉列表。
我想使用ajax响应使用JSON数据填充我的下拉列表。 请帮我解决这个问题……对我的申请非常紧急。
尝试更改jquery方法变量，它可能导致问题（即，您正在使用来自ajax回调PLUS的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=""; alert(div_data); $(div_data).appendTo('#ch_user1'); }); } }); });
我用“for”
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(''); for (i in List ) { $('#ch_user1').append(''); } } });
与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(''); params.forEach(function(entry){ $('#YOUR_DIV').append(''); }); }
有用。 希望这可以提供帮助。
<%----%> -------------------------------------------------------------------------------- $(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(""); $.each(result.d, function (key, value) { $('.DropDown').append($("").val(value.iD).html(value.firstName)); }); } }); }); ------------------------------------------------------------------------- [WebMethod] public List GetDropDown() { DataTable dt = new DataTable(); List result = new List (); 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; } }
我们可以像下面一样填充下拉列表。 我觉得这对你来说都很容易。
var options = $("#options"); $.getJSON("/Country/GetAll/", function(response) { $.each(response, function() { options.append($("").val(this.Id).text(this.Name)); }); });
最简单的方法是下载这个库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 。
尝试如下
success: function (response) { for (var i = 0; i < response.length; i++) { $("#xxx").append(""); } }