XHR无法在Java中加载GET?

时间:2017-07-14 09:35:41

标签: javascript java jquery ajax

这很奇怪,因为我试图从我的ajax获取servlet响应,并且第一次加载页面并触发请求时,我在控制台日志中得到了正确的响应,但下次,我尝试点击按钮,以获得它一直给我错误的响应。

XHR failed loading: GET "http://localhost:8080/TestApplication/HomeServlet?format=json".
send @ jquery-3.2.1.min.js:4
ajax @ jquery-3.2.1.min.js:4
(anonymous) @ Home.jsp?apiname=&apiendpoint=&apiversion=&check=Check:33
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

这令我感到困惑,我想知道为什么我会得到如此奇怪的回应。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="ajaxresponse">

</div>
<form>
 API Name:<br>
  <input type="text" id = "apiname" name="apiname">
   API ENDPOINT:<br>
  <input type="text" id ="apiendpoint" name="apiendpoint">
  <br>
  API VERSION:<br>
  <input type="text" id="apiversion" name="apiversion">
   ACCESSIBLE:<br>
  <input type="checkbox" name="source" value="internet"> Internet<br>
    <input type="checkbox" name="source" value="vpn"> VPN<br>
 <!-- 
  <br><br>
  <input type="submit" formaction="Home" method="post" value="Submit"> -->
  <br>
    <input type="submit" id="check" name="check" value="Check">

</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.ajax({
           url: 'HomeServlet',
           data: {
                  format: 'json'
               },
           error: function (request, status, error) {
                console.log(error);
            },
           success: function(data) {
               var $val1 = data.value1;
               var $val2 = data.value2;
              // $('#ajaxresponse').append('<p>'+$val1+'</p>');
            console.log(data.value1);
           },
            type: 'GET'
        });
});
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

两种解决方案都是可能的:

1)将输入按钮类型从提交更改为按钮,然后重试,因为您也通过点击它来提交表单,这可能会导致问题。

2)点击按钮尝试event.preventDefault()。

答案 1 :(得分:0)

您可能希望通过将事件传递给匿名函数并调用event.preventDefault()来阻止默认行为。提交表单可能会更改页面的网址,导致您的ajax网址不同,因为您将servlet称为相对网址。