Comment remplir dropdownlist avec des données JSON en tant que réponse ajax dans jQuery
Je travaille sur une application j2ee. Dans ma candidature, j'ai une liste déroulante (ou un élément de sélection). Je souhaite remplir cette liste déroulante avec des données JSON sous forme de réponse Ajax.
Ci-dessous le code de ce que j'ai:
Code côté serveur (json_source.Java) qui génère une réponse 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
}
}
et les données JSON générées avec succès par le code côté serveur ci-dessus:
{
"aaData": [{
"value": "login1",
"text": "kapils"
}, {
"value": "login2",
"text": "davidn"
}, {
"value": "login3",
"text": "alanp"
}]
}
et Below est le code côté client (source1.jsp) qui génère la demande ajax:
(Utilisation de $ .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 Utiliser ($ .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');
});
});
Maintenant, lorsque j'ai cliqué sur le bouton (#id_trial), le code côté serveur est exécuté avec succès et un objet JSON a été créé. mais je ne reçois pas cette "réponse JSON" dans la fonction de rappel du paramètre Success utilisant l'appel ajax de jQuery.
et en dehors de l'appel ajax de jQuery, j'ai également essayé avec la fonction $.getJSON de recevoir une réponse JSON ... mais je n'ai pas obtenu de données JSON.
Alors s'il vous plaît dites-moi s'il y a une erreur dans mon code, et comment obtenir des données JSON en utilisant le code ci-dessus et remplir la liste déroulante.
Je souhaite remplir ma liste déroulante avec des données JSON à l'aide d'une réponse ajax. S'il vous plaît, aidez-moi à résoudre ce problème ... c'est très urgent pour mon application.
essayez de changer la variable de méthode jquery, cela pourrait être à l'origine du problème (c'est-à-dire que vous utilisez la variable data provenant du rappel ajax PLUS et tentez ensuite de l'affecter à l'objet item dans la méthode jquery - remplacé par 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');
});
}
});
});
J'utilise "pour"
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>');
}
}
});
Travailler avec Laravel c'est ma solution:
$("#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>');
});
}
Ça marche. J'espère que cela peut aider.
Nous pouvons remplir le menu déroulant comme ci-dessous. c'est très facile pour vous tous, je suppose.
var options = $("#options");
$.getJSON("/Country/GetAll/", function(response) {
$.each(response, function() {
options.append($("<option />").val(this.Id).text(this.Name));
});
});
Le moyen le plus simple est de télécharger cette bibliothèque https://github.com/JocaPC/jquery-view-engine/tree/master/src . Cette bibliothèque JQuery charge directement JSON dans des fenêtres déroulantes et semble correspondre parfaitement à votre exemple. Il vous suffit de mettre le code suivant:
success: function (data) {
$('#ch_user1').view(data.aaData);
}
Jetez un oeil à cette page https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown pour plus de détails.
<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;
}
}
Essayez comme suit
<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>");
}
}