JQuery-Ajax后台提交数据与获取数据-优快云博客

本文详细介绍了如何利用jQuery的AJAX方法进行前后端数据的提交与获取，包括设置请求类型、URL、数据类型及回调函数等关键步骤，同时展示了如何处理成功响应和错误情况。

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

Java代码

function jqajax(){  
    var urlName = $("#urlName").val();  
    var urla = $("#url").val();  
    var pid = $("#pid").val();  
  
    var url = "http://192.168.2.3:3001/address/post";//后台数据库接口  
  
    $.ajax({  
        type: "post",  
        url: url,  
        data: {urlName:urlName,url:urla},  
        dataType:"JSONP",  
        jsonpCallback:"flightHandler",  
        //beforeSend: function(){  
        //    $("#span_content").text("数据处理中...");  
        //},  
        //success: function(msg){  
        //    $("#show").html(msg);  
  
        success:function(t){  
             
            if(t.status  == 'success'){  
  
                alert('yesssss');  
  
            }else{  
  
                alert('noooooooooo');  
  
            }  
        }  
  
    });  
}

上面是提交数据

下面是获取数据

Java代码

function jqajax(){  
  
    $.ajax({  
        url: "http://192.168.2.3:3001/address/get/list?page=11&limit=20",//页数11  每页20条  
                                                   //获取数据接口  
                                 
        type: "GET",  
        dataType: "jsonp",  
        jsonpCallback:"flightHandler",  
        success: function (data) {  
            data.data.forEach(function(d){  
                var customers_html = "<div class='list-style' data-id="+ d.id + " ><p class='p1'><a href='" + '"' + d.url_str + '"' + "'>"+d.url_name+"</a></p><p><span  id=" + d.url_str + " data-id="+ d.id + " data-dd="+ d.pid + ">"+"修改"+"</span><span  id=" + d.id + " >"+"删除"+"</span></p></div>";  
               // onclick='ShowDiv("+'"'+MyDiv+'"'+","+'"'+fade+'"'+")'  
                $(".list").prepend(customers_html);  
                //$("#sure").bind()("click", function () {  
                //  
                //})  
                //var id = $(this).attr("id");  
                //var dd = $(this).attr("data-id");  
                //document.getElementById("change").value = d.id;  
                //document.getElementById("typ").value = d.pid;  
                $("#" + d.id ).bind("click", function () {  
                    document.getElementById("MyDiv").style.display='block';  
  
                    document.getElementById("fade").style.display='block' ;  
                    var bgdiv = document.getElementById("fade");  
                    bgdiv.style.width = document.body.scrollWidth;  
// bgdiv.style.height = $(document).height();  
                    $("#"+fade).height($(document).height());//???????  
                    $(this).closest(".list-style").remove();  
                });  
                //$("#" + d.id ).bind("click", function () {  
                //    //获取ID  
                //    console.log("2222222222222222222222222222222222222222");  
                //    var id = $(this).attr("data-id");  
                //    //AJAX发送给服务端  
                //    console.log(id);  
                //    //删除元素  
                //  
                //    //选中当权元素的祖级中class为list-style的元素，执行删除  
                //    $(this).closest(".list-style").remove();  
                //});  
                $("#" + d.url_str ).bind("click", function () {  
                    //获取ID  
  
                    var id = $(this).attr("data-id");  
                    document.getElementById("change").value = id;  
                    var dd = $(this).attr("data-dd");  
                    document.getElementById("typ").value = dd;  
                    //AJAX发送给服务端  
                    //删除元素  
  
                    //选中当权元素的祖级中class为list-style的元素，执行删除  
          
                    document.getElementById("MyDi").style.display='block';  
  
                    document.getElementById("fad").style.display='block' ;  
                    var bgdiv = document.getElementById("fad");  
                    bgdiv.style.width = document.body.scrollWidth;  
// bgdiv.style.height = $(document).height();  
                    $("#"+fad).height($(document).height());//???????  
                });  
            })  
  
        },  
        error: function (data) {  
            alert();  
        },  
        complete: function (data) {  
        }  
    });  
}