使用 Ajax 将字符串数据发送到 Java答案

【问题标题】：Sending String data to Java using Ajax使用 Ajax 将字符串数据发送到 Java
【发布时间】：2015-11-05 19:32:12
【问题描述】：

我尝试使用 Ajax 发送字符串数据，然后使用 Java 代码从服务器发回 JSON 数据。但是每次当我尝试运行 javascript 时，它都会提示“路径查找器：错误”。

当我尝试在 java 中的“return”行中设置断点时，它不起作用，所以我猜是请求内容有问题。

但是当我使用 POSTMAN 测试数据时，它可以工作！（如图所示）。谁能帮我解决这个问题？千恩万谢！！

JavaScript:targetpaths.js

var serviceURL = "http://localhost:8080/TransportationNetwork/rest/paths";

$('#findPaths').click(function() {
                getPaths();
});

function getPaths() {
        console.log('display paths');
        $.ajax({
                type:'POST',
                contentType:'application/json', //data type sent to server
                url: serviceURL,
                dataType:"json", // data type get back from server
                data: dataToServer(), //data sent to server 
                success: function(data, textStatus, jqXHR){
                        alert('Path created successfully');
                },
                error: function(jqXHR, textStatus, errorThrown){
                        alert('Path Finder : ' + textStatus);
                }
        });
}

function dataToServer() {
        var array = "";
        var        str1 = $('#source').val();
        var        str2 = $('#target').val();

        array = str1 + "," + str2;

        return array;
}

<!DOCTYPE html>

HTML：

<head>
    <title>Path Finder</title>
</head>

<body>
    <div style="padding-left:100px;font-family: monospace;">
        <h2>Path Finder</h2>

        <div style="width: 200px; text-align: left;">

            <div style="padding:10px;">
                Source Node: <input id="source" name="source" />
            </div>

            <div style="padding:10px;">
                Target Node: <input id="target" name="target" />
            </div>

            <div style="padding:10px;text-align:center">
                <button id="findPaths">Find Paths</button>
            </div>

        </div>

        <ul id="paths"></ul>


</div>

<p id="demo"></p>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/targetpaths.js"></script>

Java 代码：

@Path("/paths")
public class PathsResource {
        PathDao pathDao;

    public PathsResource() {
            pathDao = new PathDao();
    }

    @POST
    @Produces(MediaType.APPLICATION_JSON)
    @Consumes("text/plain")
    public List<DirectedEdge> pathsInfo(@QueryParam("st") String st) {
            System.out.println("Searching paths : " + st);
            return pathDao.getEdgeList(st);

    }

更新数据：

我将上面的代码更改为下面的内容，它确实正确调用了
"System.out.println("Searching paths : " + st);"
。
但是，浏览器仍然给我发送错误提示，我不知道如何解决这个问题，是不是因为它没有返回正确的JSON 格式？但是为什么我可以在 POSTMAN 中看到返回的数据是正确的？？？救命啊！！！

JAVA：

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public List<DirectedEdge> pathsInfo(@QueryParam("st") String st) {
        System.out.println("Searching paths : " + st);
        return pathDao.getEdgeList(st);
    }

JAVASCRIPT：

var serviceURL = "http://localhost:8080/TransportationNetwork/rest/paths";

function dataToServer() {
    var array = "";
        str1 = $('#source').val();
        str2 = $('#target').val();

array = str1 + "," + str2;

return array;
}

$('#findPaths').click(function() {
        getPaths();
});

function getPaths() {
    console.log('display paths');
    $.ajax({
        type:'GET',
        url: serviceURL,
        dataType:"json", // data type get back from server
        data:"st=" + dataToServer(), //data sent to server 
        success: function(data){
            alert('Path created successfully');
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('Path Finder : ' + textStatus);
        }
    });
}

【问题讨论】：

dataToServer() 返回的字符串是什么？它看起来像无效的 JSON。
请回复dataToServer()。
dataToServer 只返回一个类似 "2,8" 的字符串值，表示目标 id 和源 id.@taggon ，@AlvaroJoao
即使我更改了@consume("text/plain")，它也不起作用。 @taggon

标签： javascript java jquery ajax

【解决方案1】：

修改你的代码为

   var serviceURL = "http://localhost:8080/TransportationNetwork/rest/paths?";

    $('#findPaths').click(function() {
                    getPaths();
    });

    function getPaths() {
            console.log('display paths');
        var  str1 = $('#source').val();
        var  str2 = $('#target').val();

serviceURL=serviceURL+str1 + "," + str2;
            $.ajax({
                    type:'POST',
                    contentType:'application/json', //data type sent to server
                    url: serviceURL,
                    dataType:"json", // data type get back from server
                   // data: dataToServer(), //data sent to server 
                    success: function(data, textStatus, jqXHR){
                            alert('Path created successfully');
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                            alert('Path Finder : ' + textStatus);
                    }
            });
    }

或者更新你dataToServer()方法为

function dataToServer() {
var array = "";
    var str1 = $('#source').val();
    var str2 = $('#target').val();
        array = str1 + "," + str2;
return JSON.stringify({
        "st" : array

    });
}

【讨论】：

我需要在javascript中指定“st”参数吗？ @艾哈迈德
是的，我已经通过答案进行了更新，并添加了另一种方式，只需修改你的 dataToServer 方法，就像我上面提到的那样
你能告诉我如何在 url 中指定“st”值吗？是 url + "st=" + dataToServer() 吗？ @艾哈迈德
还将@Consumes("text/plain") 更改为@Consumes("application/json")
当您通过 POSTMAN 提交 url 时，只需将 ?st=1,2 附加到 url

【解决方案2】：

如果您真的想将 JSON 数据发送到服务器，只需让 dataToServer() 返回有效的 JSON。这里修改后的函数：

function dataToServer() {
    var array = [];
    var str1 = $('#source').val();
    var str2 = $('#target').val();

    array = [str1 , str2];

    return JSON.stringify(array);
}

记得恢复@Consumes("application/json")。

【讨论】：

谢谢，但是java代码中的st参数呢？我需要做任何改变吗？ @taggon
st 参数应附加到serviceURL。拨打$.ajax时，将url: serviceURL改为url: serviceURL + '?st=' + YOUR_ST_DATA。
我在那里试过你的代码，但同样的错误弹出。我想我需要发送像“2,8”这样的字符串。
我刚刚意识到你想以st 发送数据。我对么？然后，您不需要 JSON。删除contentType，恢复之前的dataToServer，将Ajax的类型改为"GET"。使用"st="+dataToServer() 作为要发送的数据。而已。忘记我之前的所有回答。
谢谢，我按照你说的做了，现在我可以看到 "System.out.println("Searching paths : " + st); " 在 eclipse 中工作。但是浏览器中弹出了同样的错误，为什么它不能调用success方法呢？ @taggon

【解决方案3】：

您错误地构建了String 阅读this

解决方案：

    function dataToServer() {
        var array = "";
        var        str1 = '"source":'+ $('#source').val();
        var        str2 = '"target":'+ $('#target').val();

        array = "{"+str1 + "," + str2+"}";

        return array;
}

请看下面的例子：

var string = '1,2';
var string2 = '{"source":1,"target":2}';
try {

  var json = JSON.parse(string);
  document.write('ok : ' + string);
  document.write('<br/>');
  document.write(JSON.stringify(json, null, 2));
  document.write('<br/>');

} catch (err) {
  document.write('err: 1,2');
  document.write('<br/>');
}

try {

  var json2 = JSON.parse(string2);
  document.write('ok :' + string2);
  document.write('<br/>');
  document.write(JSON.stringify(json2, null, 2));

} catch (err) {
  document.write('err : {"method":1,"target":2}');
  document.write('<br/>');
}

【讨论】：

谢谢哥们，但它只是弹出了同样的错误，我只是想知道我是否需要更改java代码中的“st”参数？ @alvaro
您好，我修改了我的代码，如上面的 UPDATE 所示，但是，浏览器仍然向我发送错误警报，我不知道如何解决这个问题，是因为它没有返回一个正确的json格式？但是为什么我可以在 POSTMAN 中看到返回的数据是正确的？ @alvaro
修改上面的UPDATE代码后，System.out.println()在java中可以正常工作。但是为什么浏览器仍然向我发送错误方法？是不是因为java中的返回值不是json格式？但为什么我可以在 POSTMAN 中看到 json 格式的数据？ @alvaro
谢谢，您认为我真的没有“Access-Control-Allow-Origin”标头问题吗？，请看stackoverflow.com/questions/33572801/…@alvaro
@user3765602 我需要几分钟才能看到它。

【解决方案4】：

我对这个领域并不熟悉，只是一个猜测，您的“dataToServer()”函数是否应该返回类似“st=2,8”的东西，而不仅仅是“2,8”？

【讨论】：

是的！正确的！但我在接收 json 数据时仍然遇到一些问题