JQuery-Ajax后台提交数据与获取数据

Posted 2020-07-21 Turbo12138

Java代码  

1. function jqajax(){  
2.     var urlName = $("#urlName").val();  
3.     var urla = $("#url").val();  
4.     var pid = $("#pid").val();  
5.   
6.     var url = "http://192.168.2.3:3001/address/post";//后台数据库接口  
7.   
8.     $.ajax({  
9.         type: "post",  
10.         url: url,  
11.         data: {urlName:urlName,url:urla},  
12.         dataType:"JSONP",  
13.         jsonpCallback:"flightHandler",  
14.         //beforeSend: function(){  
15.         //    $("#span_content").text("数据处理中...");  
16.         //},  
17.         //success: function(msg){  
18.         //    $("#show").html(msg);  
19.   
20.         success:function(t){  
21.              
22.             if(t.status  == ‘success‘){  
23.   
24.                 alert(‘yesssss‘);  
25.   
26.             }else{  
27.   
28.                 alert(‘noooooooooo‘);  
29.   
30.             }  
31.         }  
32.   
33.     });  
34. }  

 上面是提交数据

 

 

下面是获取数据

Java代码  

1. function jqajax(){  
2.   
3.     $.ajax({  
4.         url: "http://192.168.2.3:3001/address/get/list?page=11&limit=20",//页数11  每页20条  
5.                                                    //获取数据接口  
6.                                  
7.         type: "GET",  
8.         dataType: "jsonp",  
9.         jsonpCallback:"flightHandler",  
10.         success: function (data) {  
11.             data.data.forEach(function(d){  
12.                 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>";  
13.                // onclick=‘ShowDiv("+‘"‘+MyDiv+‘"‘+","+‘"‘+fade+‘"‘+")‘  
14.                 $(".list").prepend(customers_html);  
15.                 //$("#sure").bind()("click", function () {  
16.                 //  
17.                 //})  
18.                 //var id = $(this).attr("id");  
19.                 //var dd = $(this).attr("data-id");  
20.                 //document.getElementById("change").value = d.id;  
21.                 //document.getElementById("typ").value = d.pid;  
22.                 $("#" + d.id ).bind("click", function () {  
23.                     document.getElementById("MyDiv").style.display=‘block‘;  
24.   
25.                     document.getElementById("fade").style.display=‘block‘ ;  
26.                     var bgdiv = document.getElementById("fade");  
27.                     bgdiv.style.width = document.body.scrollWidth;  
28. // bgdiv.style.height = $(document).height();  
29.                     $("#"+fade).height($(document).height());//???????  
30.                     $(this).closest(".list-style").remove();  
31.                 });  
32.                 //$("#" + d.id ).bind("click", function () {  
33.                 //    //获取ID  
34.                 //    console.log("2222222222222222222222222222222222222222");  
35.                 //    var id = $(this).attr("data-id");  
36.                 //    //AJAX发送给服务端  
37.                 //    console.log(id);  
38.                 //    //删除元素  
39.                 //  
40.                 //    //选中当权元素的祖级中class为list-style的元素，执行删除  
41.                 //    $(this).closest(".list-style").remove();  
42.                 //});  
43.                 $("#" + d.url_str ).bind("click", function () {  
44.                     //获取ID  
45.   
46.                     var id = $(this).attr("data-id");  
47.                     document.getElementById("change").value = id;  
48.                     var dd = $(this).attr("data-dd");  
49.                     document.getElementById("typ").value = dd;  
50.                     //AJAX发送给服务端  
51.                     //删除元素  
52.   
53.                     //选中当权元素的祖级中class为list-style的元素，执行删除  
54.           
55.                     document.getElementById("MyDi").style.display=‘block‘;  
56.   
57.                     document.getElementById("fad").style.display=‘block‘ ;  
58.                     var bgdiv = document.getElementById("fad");  
59.                     bgdiv.style.width = document.body.scrollWidth;  
60. // bgdiv.style.height = $(document).height();  
61.                     $("#"+fad).height($(document).height());//???????  
62.                 });  
63.             })  
64.   
65.         },  
66.         error: function (data) {  
67.             alert();  
68.         },  
69.         complete: function (data) {  
70.         }  
71.     });  
72. }