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

Posted Turbo12138

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery-Ajax后台提交数据与获取数据相关的知识,希望对你有一定的参考价值。

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. }  

以上是关于JQuery-Ajax后台提交数据与获取数据的主要内容,如果未能解决你的问题,请参考以下文章

ajax提交,获取后台数据

Servlet实现表单提交(注册小功能),后台获取表单数据

springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

如何通过submit提交form表单获取后台传来的返回值

easyui怎么将前台表单数据传递给后台

使用 jQuery-AJAX 向 PHP 提交表单并在不刷新的情况下在 div 中显示新内容的问题