jQuery Ajax调用Java Rest API成功功能未触发

Question

I am trying to send HTML form data as a JSON to java rest api and it generates response as JSON. 我正在尝试将HTML表单数据作为JSON发送给java rest api，并且它会以JSON形式生成响应。 Here is my code. 这是我的代码。

HTML FORM: HTML格式：

<html>
<body>
<form action ="" method= "post" name= "testform">
    <p> Balance : <input type="text" id="balance" name="balance" /></p>
    <p>Pin : <input type="text" id="pin" name="pin" /></p>
    <p>CardID : <input type="text"  id="cardId" name="cardId" /></p>
    <input type ="submit" id="add-account" value="add user"></input>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Jquery CODE: jQuery代码：

$(function(){
console.log("Jquery called");
$('#add-account').click(function(event){
    event.preventDefault();
    var balance = $("#balance").val();
    var pin = $("#pin").val();
    var cardId = $("#cardId").val();
    var firstcall = 
    $.ajax({
        type: "POST",
        url: "http://localhost:8081/quickpay/webapi/myresource",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            "balance":balance,
            "pin": pin,
            "cardId": cardId
        }), 
        dataType: "json",
        success:function (successResponse,textStatus,jqXHR) {
            alert("first api");         
        },
        error: function (errorResponse1) {
            console.log(errorResponse1);
            alert("failed first api");
        }
    });
});
});

JAVA REST API: JAVA REST API：

@Path("myresource")
public class MyResource {
    @POST
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Account createAccount(Account acc){
        Account account =  AccountService.createAccount(acc.getBalance(),acc.getPin(),acc.getCardId());
        return account;
    }
}

OUTPUT I'm getting is: 我得到的输出是：

When I try to call the api in POSTMAN, it runs successfully and data is inserted successfully. 当我尝试在POSTMAN中调用api时，它运行成功并且数据已成功插入。 When I try to click on ADD USER button , data is inserted into database successfully but ALERT messege of success function does not appear. 当我尝试单击“添加用户”按钮时，数据已成功插入数据库，但未出现成功功能的警报消息。

I'm monitoring network tab of Google chrome, There I find this error in myresource status is cancelled and type is xhr. 我正在监视Google chrome的网络标签， 在那里我发现myresource状态中的此错误已取消，类型是xhr。

When hovering mouse on Jquery.min.js I get this.. 当将鼠标悬停在Jquery.min.js上时，我得到了这个。

n.ajaxTransport.k.cors.a.crossDomain.send @ jquery.min.js:4 n.ajaxTransport.k.cors.a.crossDomain.send @ jquery.min.js：4

n.extend.ajax @ jquery.min.js:4 n.extend.ajax @ jquery.min.js：4

(anonymous function) @ main.js:9 （匿名函数）@ main.js：9

n.event.dispatch @ jquery.min.js:3 n.event.dispatch @ jquery.min.js：3

n.event.add.r.handle @ jquery.min.js:3 n.event.add.r.handle @ jquery.min.js：3

Problem : How can I make success function of ajax call working ?? 问题：如何使ajax调用的成功功能起作用？ Where I'm going wrong.? 我要去哪里错了？

EDIT: I added preventDefault() method. 编辑：我添加了preventDefault（）方法。 So Now It is working! 所以现在它正在工作！

Answer 1

You do not cancel the button click so the form submits 您不取消单击按钮，因此表单提交

$('#add-account').click(function(e){
    e.preventDefaul();
    ...

jQuery Ajax调用Java Rest API成功功能未触发

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-07-31 19:37:39

jQuery Ajax调用Java Rest API成功功能未触发

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-07-31 19:37:39

解决方案1
2 已采纳 2015-07-31 19:37:39