Jquery Ajax调用java rest api成功函数没有触发

Jquery Ajax call to java rest api success function is not firing

本文关键字：函数 成功 api Ajax 调用 java rest Jquery      更新时间：2023-09-26

我试图将HTML表单数据作为JSON发送到java rest api，它生成响应为JSON。

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代码:

$(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: 
@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;
    }
}

我得到的输出是:

当我尝试调用POSTMAN中的api时，它成功运行并且成功插入数据。当我尝试单击ADD USER按钮时，数据成功插入数据库，但没有出现成功功能的ALERT消息。

我正在监控谷歌浏览器的网络选项卡，在那里我发现这个错误在我的资源状态被取消，类型是xhr。

当鼠标悬停在Jquery.min.js上时，我得到这个…

n.ajaxTransport.k.cors.a.crossDomain。发送@ jquery.min.js:4

n.extend。Ajax @ jquery.min.js:4

(匿名函数)@ main.js:9

n.event。调度@ jquery.min.js:3

n.event.add.r。处理@ jquery.min.js:3

问题:我如何使ajax调用的成功功能工作?我哪里做错了?

编辑:

我添加了preventDefault()方法。所以现在它起作用了!

不取消按钮单击，因此表单提交

$('#add-account').click(function(e){
    e.preventDefaul();
    ...
相关文章：