学习记录-ajxa搜索以及js删除_删除的ajxa-优快云博客

本文介绍了一个使用jQuery实现的城市机场查询系统。系统通过Ajax技术从服务器获取数据，并利用jQuery动态更新表格内容来展示查询结果。此外，还实现了结果的美化显示及编辑、删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function () {
    $("#queryButton").click(function () {
        var city_name = $("#city_name").val();
        var city_code = $("#city_code").val();
        //执行搜索框查询请求
        $.post("getCityAirport.do", {
            city_name: city_name,
            city_code: city_code
        }, function (data, status) {
            var edit = " <button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\">\n" + "编辑\n" + "</button>";
            var del = "<button id=\"delButton\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" onclick=\"delCityAirport(data[i].cityId)\"> 删除 </button>";
            $("table tbody").html("");
            for (var i = 0; i < data.length; i++) {
                console.log(data[i].cityName);

                $("table tbody").append(
                    "<tr>" +
                    "<td>" +
                    data[i].cityName +
                    "</td>" +
                    "<td>" +
                    data[i].airportName +
                    "</td>" +
                    "<td>" +
                    data[i].cityCode +
                    "</td>" +
                    "<td>" +
                    data[i].cityPinyin +
                    "</td>" +
                    "<td>" +
                    data[i].cityAbbreviation +
                    "</td>" +
                    "<td>" +
                    edit +
                    del +
                    "</td>" +
                    "</tr>"
                );
            }
            //给查询后的结果添加色彩
            setTimeout(function () {
                var tr = $("table tbody tr")
                for (var i = 0; i < data.length; i++) {
                    if (i % 2 == 0) {
                        console.log(tr[i]);
                        $(tr[i]).addClass("info");
                    } else {
                        console.log(tr[i]);
                        $(tr[i]).addClass("error");
                    }
                }
            }, 0);

        });
    });

    $("#delButton").click(function () {
        var code = $(this).attr("code");
        console.log(code);
    });


原生ajax搜索

});
//
//         var params = {};
//         params.city_name = $("#city_name").val();
//         params.city_code = $("#city_code").val();//注意params.名称  名称与实体bean中名称一致

//         $.ajax({
//             type: "POST",
//             url: "getCityAirport.do",
//             data: params,
//             dataType: "json",
// //                     contentType: "application/json; charset=utf-8",//此处不能设置，否则后台无法接值
//             success: function (data) {
//                 $("tbody").html("");
             for (var i = 0; i < data.length; i++) {
                console.log(data[i].cityName);

                $("table tbody").append(
                    "<tr>" +
                    "<td>" +
                    data[i].cityName +
                    "</td>" +
                    "<td>" +
                    data[i].airportName +
                    "</td>" +
                    "<td>" +
                    data[i].cityCode +
                    "</td>" +
                    "<td>" +
                    data[i].cityPinyin +
                    "</td>" +
                    "<td>" +
                    data[i].cityAbbreviation +
                    "</td>" +
                    "<td>" +
                    edit +
                    del +
                    "</td>" +
                    "</tr>"
                );
//             },
//             error: function (data) {
//                 alert("出现异常，异常原因【" + data + "】!");
//             }

//         });
function delCityAirport(id) {
    var id = id;
    var con = confirm("确认删除这条记录吗");
    if (con) {
        window.location.href = "delAirport.do?id="+id;
    }
}