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

我试图使用Ajax发送字符串数据，然后使用Java代码从服务器发送回JSON数据。但是每当我尝试运行JavaScript时，它都会提示“Path Finder：error”。使用Ajax将字符串数据发送到Java

当我尝试在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); 

    }

UPDATA：

我上面的代码更改为下面的东西，它没有正确地调用
"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); 
     } 
    }); 
}

来源

2015-11-05 Thomas Hu

什么是字符串'dataToServer（）'返回？它看起来像无效的JSON。 – taggon

请寄出'dataToServer（）'的回报。 –

dataToServer只是返回一个字符串值，如“2,8”，表示目标ID和源ID。@ taggon，@AlvaroJoao –

如果你真的想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")。

来源

2015-11-05 20:17:47 taggon

谢谢，但在java代码中的st参数呢？我需要改变吗？ @taggon –

'st'参数应该附加到'serviceURL'。当你调用'$ .ajax'时，将'url：serviceURL'改为'url：serviceURL +'？st ='+ YOUR_ST_DATA'。 – taggon

我在那里试过你的代码，但弹出同样的错误。我想我需要发送像“2,8”这样的字符串。 –

您是建立在错误读Stringthis

解决方案：

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

来源

2015-11-05 20:11:00

谢谢你，但它只是弹出了相同的错误，我只是想知道我是否需要更改java代码中的“st”参数？ @alvaro –

可以通过java错误吗？ @ user3765602 –

嗨，我改变了我的代码，如上面的UPDATE所示，但是，浏览器仍然向我发送错误警报，我不知道如何解决这个问题，是因为它没有返回正确的json格式？但为什么我可以看到在POSTMAN中返回的数据是正确的？ @alvaro –

修改代码为

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 

    }); 
}

来源

2015-11-05 20:11:37

我是否需要在JavaScript中指定“st”参数？ @ahmed –

是的，我已经通过回答更新，并添加了其他方式，只是修改您的dataToServer方法，因为我上面提到 –

好的，谢谢我会尝试！ –

我对这方面并不熟悉，但只是猜测，如果你的'dataToServer（）'函数返回类似'st = 2,8'的东西而不是'2,8'？

来源

2015-11-05 20:16:05

yes！正确！但我仍然有一些问题接收JSON数据 –

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

回答

相关问题