it-swarm.com.de

Wie füllt man eine Dropdown-Liste mit JSON-Daten als Ajax-Antwort in jQuery auf?

Ich arbeite an einer j2ee-Bewerbung. In meiner Anwendung habe ich eine Dropdown-Liste (oder Element auswählen). Ich möchte diese Dropdown-Liste mit JSON-Daten als Ajax-Antwort füllen.

Unten ist der Code, den ich habe:

Serverseitiger Code (json_source.Java), der eine JSON-Antwort generiert. :

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
}

}

und die JSON-Daten, die durch obigen serverseitigen Code erfolgreich generiert wurden:

{
    "aaData": [{
        "value": "login1",
        "text": "kapils"
    }, {
        "value": "login2",
        "text": "davidn"
    }, {
        "value": "login3",
        "text": "alanp"
    }]
}

und unten ist mein clientseitiger Code (source1.jsp), der eine Ajax-Anforderung generiert:

(mit $ .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>

OR Using ($ .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');

    });
});

Wenn ich nun auf die Schaltfläche (#id_trial) klickte, wird der serverseitige Code erfolgreich ausgeführt und als Ergebnis ein JSON-Objekt erstellt. aber ich erhalte diese "JSON-Antwort" in der Rückruffunktion des Success-Parameters nicht, wenn der Ajax-Aufruf von jQuery verwendet wird.

und abgesehen vom Ajax-Aufruf von jQuery habe ich auch mit der $.getJSON-Funktion versucht, eine JSON-Antwort zu erhalten. Aber ich habe keine JSON-Daten erhalten.

Sagen Sie mir bitte, ob in meinem Code ein Fehler vorliegt und wie Sie JSON-Daten mithilfe des obigen Codes und der Dropdown-Liste auffüllen können.

Ich möchte meine Dropdown-Liste mit JSON-Daten mit ajax response auffüllen. Bitte helfen Sie mir, dieses Problem zu lösen ... es ist sehr wichtig für meine Bewerbung.

10
kits

versuchen Sie, die Variable der Jquery-Methode zu ändern. Dies könnte das Problem verursachen (d. h. Sie verwenden die aus dem ajax-Callback PLUS kommende Variable data und versuchen dann, sie dem Objekt item in der jquery-Methode zuzuweisen - geändert in 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'); 
                });  
                }
          });
        });
18
rajesh kakawat

Ich benutze "für"

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>');
        }
    }
});

Mit Laravel arbeiten, das ist meine Lösung:

$("#YOUR_DIV").on("change", function(){
    var selected = $(this).val();
    makeAjaxRequest(selected);
})

function makeAjaxRequest(opts){
    $.ajax({
        type: "GET",
        url : '{{ action('[email protected]_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>');
    });

}

Es klappt. Hoffe das kann helfen.

1
Xalo Carvalho

Wir können Dropdown wie folgt füllen. Es ist sehr leicht für dich alle, denke ich.

var options = $("#options");
    $.getJSON("/Country/GetAll/", function(response) {
         $.each(response, function() {
         options.append($("<option />").val(this.Id).text(this.Name));
     });
  });
0
dush88c

Der einfachste Weg ist das Herunterladen dieser Bibliothek https://github.com/JocaPC/jquery-view-engine/tree/master/src . Diese JQuery-Bibliothek lädt JSON direkt in dropdows und scheint perfekt zu Ihrem Beispiel zu passen. Sie müssen nur den folgenden Code eingeben:

success: function (data) {
            $('#ch_user1').view(data.aaData); 
}

Werfen Sie einen Blick auf diese Seite https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown für weitere Details.

0
Jovan MSFT
<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;
                }
            }
0
Tareq Marji

Versuchen Sie es wie folgt

<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>");

     }

}
0
Nisal Edu