【问题标题】:How to populate dropdownlist with JSON data as ajax response in jQuery如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应
【发布时间】: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() 循环 stackoverflow.com/questions/2342371/…

标签: java javascript jquery ajax json


【解决方案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);
                                }
                            });
                        });
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2012-11-08
              • 1970-01-01
              相关资源
              最近更新 更多