提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS ajax 例子「建议收藏」

JSAJAX 建议 收藏 例子
2023-06-13 09:12:30 时间

大家好，又见面了，我是你们的朋友全栈君。

用 js ， jQuery 编写 ajax 的样式，三种写法，例子：

//用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取服务器响应 document.querySelector("#show").innerHTML = xhr.responseText; } }; //发送异步请求 xhr.open("GET",url,true); //发送请求 xhr.send(); } //jQuery 写法 function sendGet(url){ $.get(url,function(data){ document.querySelector("#show").innerHTML = data; }); function sendGet(url){ //用 ajax 写 $.ajax( { url:url, method:'get', success: function(data){ document.querySelector("#show").innerHTML = data; }, error:function(err){ alert(err); } }); }

整体的代码：将项目放在 TomCat 下的 root 文件夹下，浏览器输入 localhost:8080/history.html 即可运行。

history.html 代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> table{ display: inline-table; width: 320px; border: 1px solid lightgray; border-collapse: collapse; vertical-align: top; margin-right: 0px; } td{ padding: 15px; cursor: pointer; border: 1px solid lightgray; } tr{ background: linear-gradient(to right,#f6f6f6,#fff); } tr:hover{ background: linear-gradient(to right,#eee,#f6f6f6); } div>div{ display: inline-block; width: 400px; height: 300px; padding: 10px; box-sizing: border-box; border: 1px solid lightgray; margin-left:0px ; } </style> </head> <body> <div style="width: 725px;"> <table border="1" cellspacing="0" cellpadding="0"> <tr><td title="java">疯狂java 讲义</td></tr> <tr><td title="ee">java ee</td></tr> <tr><td title="android"> android</td></tr> <tr><td title="html"> html </td></tr> <tr><td title="front">front</td></tr> </table> <div id="show"> </div> </div> <script type="text/javascript"> var xhr = new XMLHttpRequest(); window.onload = function(){ //页面加载时，替换 history 的状态 history.replaceState(null,"首页","history.html?id=java"); } //获取页面上所有td元素 var tdList = document.querySelectorAll("td"); //遍历所有的 td 元素， 为他们的 onclick 时间绑定处理函数 for(var i =0;i< tdList.length;i++){ tdList[i].onclick = function(src){ //以当前单元格的 title为参数发送异步请求 sendGet("books.jsp?id=" + src.target.title); //想 history 压入状态 history.pushState({"cellTitle":src.target.title}, "首页","history.html?id="+ src.target.title); //取消所有td元素的背景色 var tdList = document.querySelectorAll("td"); for(var i=0;i <tdList.length; i++){ tdList[i].style = undefined; } //为当前单击的单元格设置背景色 src.target.style.background = "linear-gradient(to right,#ddd, #eee)"; } } /* //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取服务器响应 document.querySelector("#show").innerHTML = xhr.responseText; } }; //发送异步请求 xhr.open("GET",url,true); //发送请求 xhr.send(); } */ //jQuery 写法 function sendGet(url){ //$.get(url,function(data){ // document.querySelector("#show").innerHTML = data; //}); //用 ajax 写 $.ajax( { url:url, method:'get', success: function(data){ document.querySelector("#show").innerHTML = data; }, error:function(err){ alert(err); } }); } //为窗口的 popstate 事件绑定监听器 window.addEventListener("popstate",function(){ //获取history 的状态数据 var curTitle = history.state["cellTitle"]; var tdList = document.querySelectorAll("td"); //取消所有单元格的背景色，只设置被选中的单元格的背景色 for(var i = 0;i <tdList.length ; i++){ if(tdList[i].title == curTitle){ tdList[i].style.background ="linear-gradient(to right,#ddd,#eee)"; } else{ tdList[i].style = undefined; } } //通过窗口地址栏获取请求参数 queryStr = window.location.href.split("?")[1]; //发送异步请求 sendGet("books.jsp?"+ queryStr); }); </script> </body> </html> book.jsp 代码： <%@page pageEncoding="UTF-8"%> <% String id = request.getParameter("id"); String result =null; if (id.equals("java")) { result = "java 书，111111111111111111111111"; }else if (id.equals("ee")){ result = "java ee书，2222222222222222222222"; }else if (id.equals("android")){ result = "android 书，33333333333333333333333"; }else if (id.equals("html")){ result = "html 书，4444444444444444444444444444"; }else if (id.equals("front")){ result = "front 书，55555555555555555"; } out.println(result); %>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158768.html原文链接：https://javaforall.cn

相关文章