getJSON calling format to servlet problem

Hello I am using Jquery getJSON to send a query parameter to servlet. The servlet URL works by itself: http://lo开发者_运维知识库calhost:8080/pgViking/recentUploads?conID=2

It gives the following output:

{reports:[{filename:"CSVFile_2010-06-16T11_54_53.csv"},
        {filename:"CSVFile_2010-06-16T11_54_53.csv"}, <br />
        {filename:"PRJ20142_05_10_2008.zip"}]}

However, I cannot get a proper response from jQuery. Here is code for it:

$(document).ready(function(){

      $("#cons").change(function(){
            var selected = $("#cons option:selected");
            // getJSON("servlet Name", Selected Value  2, 3, function to show result, callback function
            $.getJSON("recentUploads?conID=", selected.val(), function(data){
                $("#reports").contents().remove();
                    $.each(data.reports, function(index,rpt){
                    // add items to List box
                    $("#reports").append("<option>" + rpt.filename + "</option");
                    } //end function
                    ); //end of each

            }); // getJSON
        }); // change
     });

the html part:

        <select Name="eCons" size="1"  id="cons">
                <option value="select consultant">Select Consultant</option>
                <option value="4">A</option>
                <option value ="2">B</option>
                <option value="3">Br</option>
                <option value ="21">D</option>
                <option value="20">G</option>
                <option value="24">T</option>
        </select>
        <br />
        <br />
        <select id="reports" style ="width:200px">
        </select>

When I debug it in firebug I see that I have incorrect URL but I am not sure if it's the only problem:

url="recentUploads?conID=&3"

Any help it would be appreciated, Thanks,

$("#reports").append("<option>" + rpt.filename + "</option");

This is invalid. The closing tag > is not only missing, but this also won't create a real HTML element at all. Use $("<option>") to let jQuery create a real HTML <option> element.

$("#reports").append($("<option>").text(rpt.filename));

I'd also suggest to get hold of $("#reports") as a var before the loop, that's a tad more efficient.

You can find more examples in this answer.

the getJSON call expects valid JSON (valid JSON has quotes around the keys and values, with the only exception being values that are numbers. The output of your servlet should look like this:

    {
        "reports": [
            {
                "filename": "CSVFile_2010-06-16T11_54_53.csv" 
            },
            {
                "filename": "CSVFile_2010-06-16T11_54_53.csv" 
            },
            {
                " filename": "PRJ20142_05_10_2008.zip" 
            } 


  ]

}

Otherwise, you can use the jQuery ajax call, giving the dataType attribute a value of "text" and using this code in the success function:

var myObject = eval('(' + myJSONtext + ')')

you can't use jQuery.each function in this way. http://api.jquery.com/each/

                for(i in data.reports){
                // add items to List box
                $("#reports").append("<option>" + data.reports[i].filename + "</option");
                ); //end of loop

to remove & use: $.getJSON("recentUploads?conID="+selected.val(), function(data){

or:

$.getJSON("recentUploads",{conID:selected.val()}, function(data){

Maybe:

        $.getJSON("recentUploads", { 'conID': selected.val()}, function(data){
           $("#reports").contents().remove();

http://api.jquery.com/jQuery.getJSON/

Parameters are: url, data (map or string), callback.

This is way an ampersand (&) is used to join your url + paramenter passed as string (3). As result you have: recentUploaded?conID=&3