如何使用Ajax更新输入

时间:2018-08-15 10:54:09

标签: jquery ajax

当我单击语言按钮时,我会收到关于这些语言的概述。

$(".Language").on("click", overviewLanguage);

function overViewLanguage() {

    $.getJSON('http://localhost:8080/Language/getAll', function (languages) {
        var htmlString = "<ul>";
        languages.forEach(function (language) {
            htmlString += "<li languageId=" + language.language_id + "><p>" + language.nameLanguage + "</p></li>" + "<br>";
        });
        htmlString += "</ul>";

        $(".middleScreen").html(htmlString);

        $(".middleScreen li").on("click", detailLanguage);
    });
}

当我单击一种语言时,会收到详细信息。

function detailLanguage() {

    var languageId = $(this).attr("languageId");

    $.getJSON('http://localhost:8080/Language/getById?Language_id=' + languageId, 
function (data) {

        $("#txtLanguageId").val(data.language_id);
        $("#txtLanguage").val(data.nameLanguage);
    });
}

当我更改语言名称,然后单击更新按钮时,什么也没有发生。有人可以帮我吗?

$("#updateLanguage").on("click", updateLanguage);

function updateLanguage() {

    $.ajax({
        method: "POST",
        url: 'http://localhost:8080/Language/update',
        dataType: 'json',
        data: JSON.stringify(jsonLanguage()),
        contentType: "application/json; charset=utf-8",
        success: function (data, status) {
            overViewLanguage();
        },
        error: function (status) {
        }
    });
}


function jsonLanguage() {
    var newLanguage = {
        Language_id: $("#txtLanguageId").val(),
        nameLanguage: $("#txtLanguage").val()
    };
    return newLanguage;
}

1 个答案:

答案 0 :(得分:0)

请使用这个。

function updateLanguage() {

    $.ajax({
        method: "POST",
        url: 'http://localhost:8080/Language/update',
        dataType: 'json',
        data: {Language_id : $("#txtLanguageId").val(),
               nameLanguage:$("#txtLanguage").val()},
        contentType: "application/json; charset=utf-8",
        success: function (data, status) {
            overViewLanguage();
        },
        error: function (status) {
        }
    });
}

,请注意服务器端的get参数具有相同的名称 $this->input->post('Language_id')。 例如PHP