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