2015-09-25 3 views
0

Я пытался захватить информацию из веб-приложения, которое я создал, и отправил эту информацию в качестве почтового запроса на сервер Java-сервера. Webstorm IDE поставляется со встроенным инструментом для отправки запросов на получение и отправку конечной точки. Когда я проверил соединение с этим инструментом, я получил успешную 200-страничную страницу. Тем не менее, когда я пытаюсь выполнить пост-запрос с помощью JQuery, я получаю форму, которая перезагружается и не сообщается о том, было ли сообщение успешным или нет. Когда я проверяю сервер на какие-либо изменения, я вижу, что их нет.Что случилось с этим запросом POST?

Это HTML-страница, которая вызывает функцию:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Sign up page</title> 

    <!-- bootstrap core css --> 
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- custom styles for this template --> 
    <link href="bower_components/bootstrap/dist/css/signIn.css" rel="stylesheet"> 

    <!-- Amazon aws javascript api --> 
    <script type="text/javascript" src="bower_components/aws-sdk/dist/aws-sdk.min.js"></script> 

    <!-- JQuery library for js --> 
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 

    <!-- custom js for signing creating profiles --> 
    <script type="text/javascript" src="js/profileCreation.js"></script> 

</head> 
<body> 
    <!-- Fields to fill out --> 
    <div class="container"> 

     <form class="form-signin"> 
      <h2 class="form-signin-heading">Create your profile</h2> 
      <label for="firstname" class="sr-only">First Name</label> 
      <input type="text" id="firstname" class="form-control" placeholder="First Name" required autofocus> 
      <label for="lastname" class="sr-only">Last Name</label> 
      <input type="text" id="lastname" class="form-control" placeholder="Last Name" required autofocus> 
      <label for="username" class="sr-only">Username</label> 
      <input type="text" id="username" class="form-control" placeholder="Username" required autofocus> 
      <label for="inputEmail" class="sr-only">Email address</label> 
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> 
      <label for="inputPassword" class="sr-only">Password</label> 
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" value="remember-me"> Remember me 
       </label> 
      </div> 
      <button class="btn btn-lg btn-warning btn-block" onclick="createProfile()" type="submit">Sign up</button> 
     </form> 

    </div> <!-- /container --> 

</body> 
</html> 

И это файл JS с функцией называют

/** 
* Created by uidp1981 on 9/22/15. 
*/ 

function createProfile() { 
    var firstname = document.getElementById("firstname").value; 
    var lastname = document.getElementById("lastname").value; 
    var username = document.getElementById("username").value; 
    var email = document.getElementById("inputEmail").value; 
    var password = document.getElementById("inputPassword").value; 

    //var urlEndpoint = "http://localhost:8080/GoAPI/User"; 

    // JSON with user input data, update with more fields when possible 
    var data = {"firstname" : firstname, 
       "lastname" : lastname, 
       "email" : email , 
       "username" : username, 
       "password" : password}; 

    // POST request 
    $.ajax({ 
     url: "http://localhost:8080/GoAPI/User", 
     type: 'POST', 
     contentType: 'application/json', 
     data: JSON.stringify(data), 
     success: function(){ 
      //On ajax success do this 
      alert("data"); 
     }, 
     error: function(xhr, ajaxOptions, thrownError) { 
      //On error do this 
      alert("There is something wrong " + xhr.status); 
     } 
    }) 
} 

Первоначально моя проблема была та же происхождение политики от JavaScript, но я работал вокруг него с CORS для хрома. После этого проблема в том, что я нажал кнопку отправки, но страница просто обновляется, и я не получаю ни предупреждения, ни успеха, ни указания на ошибку. Я помещал неправильные параметры в свой POST-запрос или что-то еще? Я много раз проверял и пробовал много разных параметров, поэтому я был бы очень удивлен, если это проблема.

ответ

2

<input type="button" /> кнопки не отправить форму - они ничего не делают по умолчанию. Они обычно используются вместе с JavaScript как часть приложения AJAX.

<input type="submit"> кнопки будут submit форму они находятся, когда пользователь clicks на них, если не указано иное с JavaScript.

Кроме того, именно поэтому браузеры могут захватить «Enter» нажатие на форму и автоматически отправить форму, если есть кнопка отправить, но не иначе

button только что, кнопка, к которой вы можете добавить дополнительные функции, используя Javascript. Тип submit входа имеет функциональность по умолчанию отправки формы он помещен в.

Итак, когда вы объявляете Button как тип submit, когда вы не на самом деле требует от него, она попадет на сервер и возвращается с целым HTTP запросом, тогда как то, что вам нужно здесь, - это запрос AJAX. Надеюсь, это поможет вам понять, почему вы столкнулись с проблемой.

Для решения проблемы измените ваш button type на button вместо submit, и он должен работать нормально.

4

В настоящее время у вас есть атрибут type="submit", установленный на вашей кнопке. Когда вы нажимаете эту кнопку, это заставляет вашу форму отправлять на сервер, поэтому вместо запроса AJAX вы получаете полный запрос страницы.

Вы должны быть в состоянии решить эту проблему, что у вас есть, изменив тип кнопки на кнопку:

<button class="btn btn-lg btn-warning btn-block" 
    onclick="createProfile()" 
    type="button">Sign up</button> 
+0

Именно так, спасибо – mudejar

Смежные вопросы