web-dev-qa-db-ja.com

jQueryでAjax応答としてJSONデータをドロップダウンリストに入力する方法

私はj2eeアプリケーションに取り組んでいます。私のアプリケーションには、ドロップダウンリスト（または要素の選択）があります。このドロップダウンリストにAjax応答としてJSONデータを入力します。

以下は私が持っているコードです：

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データを入力します。この問題を解決するのを手伝ってください...私のアプリケーションにとって非常に緊急です。

javajavascriptjqueryajaxjson
11
kits

jqueryメソッド変数を変更しようとすると、問題が発生している可能性があります（つまり、ajaxコールバックPLUSからのdata変数を使用していて、次にitemオブジェクトに割り当てようとしています。 jqueryメソッド-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'); 
                });  
                }
          });
        });
19
rajesh kakawat

「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('<option value="">All</option>');
        for (i in List ) {
            $('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');
        }
    }
});
3
Pichet Thantipiputpinyo

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

}

できます。これが役立つことを願っています。

2
Xalo Carvalho

以下のようにドロップダウンを作成できます。あなたにとってはとても簡単です。

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

最も簡単な方法は、このライブラリをダウンロードすることです https://github.com/JocaPC/jquery-view-engine/tree/master/src このJQueryライブラリは、JSONを直接ドロップダウンにロードし、例に完全に一致するように見えます。次のコードを入力するだけです。

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

詳細については、このページをご覧ください https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown .

0
Jovan MSFT

次のようにしてみてください

<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