AJAX用于从做事器发送和吸收数据,而无需重新加载页面。我们可以利用jQuery轻松实现AJAX。它为AJAX功能供应了各种方法。
我利用Eclipse IDE创建了这个示例。下面我分享了详细的步骤。
AJAX with JSP利用jQuery示例1.首先通过转到文件>新建>动态Web项目来创建动态Web项目。
2.现在给出任何名称,然后单击Finish以创建项目。
3.要在我们的代码中利用jQuery,我们须要下载jQuery库。转到下面的链接并下载jQuery库的开拓版本。
下载链接: https ://jquery.com/download/
4.复制并粘贴到项目的WebContent文件夹中。见下面的截图。
5. 在WebContent文件夹中创建两个文件index.jsp和content.jsp。在相应的文件中复制并粘贴以下代码。
index.jsp
<html> <head> <title>AJAX With JSP Using jQuery</title> <script src=\"大众jquery-1.11.3.js\"大众></script> <script> $(document).ready(function(){ $(\"大众#btn\"大众).click(function(){ $.get(\"大众content.jsp\公众,function(data){ $(\"大众h2\公众).html(data); }); }); }); </script> </head> <body> <h2></h2> <input type=\"大众button\"大众 id=\公众btn\"大众 value=\公众Show\公众/> </body></html>
content.jsp
<%out.print(\"大众This is AJAX with JSP using jQuery\"大众);%>
6.末了在做事器上运行您的项目。
产量
解释
jQuery代码写在head部分中。对付利用jQuery库,我们必须将它包含在我们的页面上。我通过在<script src =“”> </ script>标记中供应库的源代码来完成此操作。
当我们单击Show按钮时,get()函数处理AJAX GET要求并从做事器获取数据。它的第一个参数是从中获取数据的页面的url。在第二个参数中,调用另一个函数,从做事器获取的信息存储在数据中。末了,我们利用html()函数在h2标签中编写数据。
如果您碰着任何问题,请不才方评论。
快乐编码!!