Question

我是jQuery和Ajax的初学者。当我单击添加按钮时，所有字段均为空。然后，我在其中填写这些字段，当我单击“提交”按钮时，什么也没有发生。我不知道该怎么办。有人可以帮我吗？

点击添加按钮时：

$("#add").on("click", addSeries);

function addSeries() {

    $.getJSON("http://localhost:8080/Serie/getAll", function(series) {
        series.length + 1;
        $("#txtSerieId").val(series.length + 1);
    });
}

点击提交按钮

$("#submit").on("click", submit);
function submit() {

    var serieJson = '{"serie_id":' + $("#txtSerieId").val() + ',';
    serieJson += '"name" : "' + $("#txtName").val() + '",';
    serieJson += '"language_id" : "' + $("#txtLanguage_id").val() + '",';   
    serieJson += '"genre_id" : "' + $("#txtGenre").val() + '",';     
    serieJson += '"network_id" : "' + $("#txtNetwork").val() + '"';      
    serieJson += '}';

    $.ajax({
        method: "POST",
        url:"http://localhost:8080/Series/add",
        data: JSON.stringify(serieJson),
        dataType: "json",
        processData:false,
        headers: {
            'Content-Type': "application/json"
    },
        success: function(data) {
            getAllSeries();
        }, error: function(err) { 
        }
    });

}

Answer 1

不用担心，如果什么都没有发生-使用Ajax，它多数发生在幕后。我发现浏览器的检查器工具对于解决这些请求非常有用。

在大多数版本的Chrome和Firefox中，按CTRL + SHIFT + I或F12（或在浏览器菜单中找到Inspector / Developer Tools）以打开检查器。
切换到“网络”视图/标签/面板。
通常会有一个标记为XHR的过滤器-单击以隐藏除ajax请求之外的所有内容。（到目前为止，它可能是空的）
提交您的Ajax请求。

这时，如果您的代码有效，您应该会在网络标签中看到一个新的发帖请求，您可以单击该发帖请求进行浏览。每个浏览器都有一些不同，但是您应该能够查看将哪些参数以及它们的值发送到服务器，以及服务器的响应。例如，如果您的服务器端代码返回了错误，则应该可以在这里看到它。

如果在拨打ajax电话后不看到任何内容，则可能是javascript / jquery代码在调用之前遇到了错误。检查员也可以提供帮助！尝试切换到“控制台”标签-发生的任何JavaScript错误都应出现在此窗口中。 您可能需要在打开控制台的情况下再次运行提交功能。

希望能为您指明正确的方向！检查器是一个ajax请求的最好的朋友。本文详细介绍了使用它进行故障排除的方法：https://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 2

我在“网络”标签中唯一看到的是：

enter image description here

Answer 3

创建对象，而不是将值附加到字符串中。

function submit() {

    var serieJson = {
        serie_id: $("#txtSerieId").val(),
        name: $("#txtName").val(),
        language_id: $("#txtLanguage_id").val(),
        genre_id: $("#txtGenre").val(),
        network_id: $("#txtNetwork").val()
    };

    $.ajax({
        method: "POST",
        url:"http://localhost:8080/Series/add",
        data: JSON.stringify(serieJson),
        dataType: "json",
        processData:false,
        headers: {
            'Content-Type': "application/json"
        },
        success: function(data) {
            getAllSeries();
        },
        error: function(err) { 
        }
    });
}

无法使用jQuery和Ajax

3 个答案: