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

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

上面是提交数据

下面是获取数据

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