Get json through ajax/javascript

Question

I have a webservice developed in Java that is responsible for returning all the compositions of a particular fabric/piece (textile area).

The webservice is first of all returning the existing composition, that is to say, as the webservice is used in particular on the page that will allow to update certain article, it is necessary to get first the current drawing and later the remaining ones. So far there is no problem.

The part I tried to explain behind belongs to backend. The problem lies in the frontend, more specifically on the page that is responsible for updating an article. An article can be described as a product, which has already been designed, and/or planned and which is in catalog. Faced with this, as I said earlier, I have to show previously the values of the attributes of an article. Note below that the article with the ref "UL ..." has already completed some figures:

The problem occurs, as I said, at the moment when I try to get composition. I show below the code that I tried to implement and that is giving problems:

function populate(frm,data) {


    var out="";
    for (var key in data) {
if(key == "composicao")
        {
            out=encodeURI(data[key]);

            var uri="http://127.0.0.1:8080/revistaSystem/resplaneamento/ServicoComposicao/ObterTodasAsComposicoes/";
            var urifinal = uri.concat(out);
            alert(urifinal);

                    $.ajax({
                             url:urifinal,
                             complete: function (response) {
                             var data=response.responseText;
                             alert(data);           
                             var jsonData = $.parseJSON(data);

                             var $select = $('#composicao');

                             $select.empty();

                             $(jsonData).each(function (index, o) {    
                                var $option = $("<option/>").attr("value", o.numPK).text(o.composicao);
                                $select.append($option);
                            });

                                //preencher option

                            },
                            error: function () {
                                $('#output').html('Bummer: there was an 1error!');
                            },
                    });
        }   
            }

In view of this, in the case of composition in particular, there is a need to encode the parameter (a string which enters as a parameter), because a composition, of a given fabric, can be simple or composed, that is to say:

1. 100% Cotton (Simple composition)
2. 30% Cotton/60% Linen (Composite composition)

Given that an article may have a composite composition, it is always separated by a "/". Here occurs the problem. The webservice always resumes a JSON to be interpreted through Javascript/AJAX, but on the frontend I can’t get JSON, I’m only getting the following message (error):

Value taken back by webservice:

How can I solve this problem?

Answer 1

The problem was in the coding of the parameter, as I suspected, so I performed the following steps:

1: I implemented a new function similar to the urlencode() function that exists for php, which I also used in this project.

   function urlencode(text) {
        return encodeURIComponent(text).replace(/!/g,  '%21')
                                       .replace(/'/g,  '%27')
                                       .replace(/\(/g, '%28')
                                       .replace(/\)/g, '%29')
                                       .replace(/\*/g, '%2A')
                                       .replace(/%20/g, '+');
    }

2:Taking into account that the variable out receives a value that is used as parameter, I also made this change:

out=urlencode(data[key]);

Problem solved :)