JQuery-Ajax后台提交数据与获取数据 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');
- }
- }
- });
- }
上面是提交数据
下面是获取数据
- 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) {
- }
- });
- }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构