Question

我一直在尝试从我创建的网络应用中获取信息，并将信息作为发布请求发送到java服务器后端。 Webstorm IDE附带了一个内置工具，用于向端点发送get和post请求。当我用这个工具测试连接时，我收到了一个成功的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 for chrome解决了这个问题。之后问题是我点击提交按钮，但页面只是刷新，我最终既没有显示成功的警报也没有指出错误。我在POST请求中添加了不正确的参数吗？我检查了很多次并尝试了很多不同的参数，所以如果这就是问题，我真的很惊讶。

Answer 1

目前，您的按钮上设置了属性type="submit"。当您单击此按钮时，它会将您的表单提交给服务器，因此您将获得完整页面请求而不是AJAX请求。

您应该可以通过将按钮类型更改为按钮来解决您遇到的问题：

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

Answer 2

<input type="button" />按钮不会提交表单 - 默认情况下他们不会执行任何操作。它们通常与JavaScript一起用作AJAX应用程序的一部分。

除非您使用<input type="submit">另行指定，否则

submit按钮会clicks当用户JavaScript时所使用的表单。

此外，这就是为什么浏览器可以捕获＆＃34;输入＆＃34;如果有提交按钮，则在表单上按键并自动提交表单，否则

button只是一个按钮，您可以使用Javascript向其添加其他功能。 submit输入类型具有提交其所放置表单的默认功能。

因此，当您在实际需要时将Button声明为类型submit时，它会点击服务器并返回完整的HTTP请求，而您需要的是一个AJAX请求。希望这可以帮助您了解您遇到问题的原因。

此外，要解决您的问题，请将button type改为button而不是submit，它应该可以正常运行。

这个POST请求有什么问题？

2 个答案: