AJAX用于从做事器发送和吸收数据,而无需重新加载页面。
我们可以利用jQuery轻松实现AJAX。
它为AJAX功能供应了各种方法。

我利用Eclipse IDE创建了这个示例。
下面我分享了详细的步骤。

AJAX with JSP利用jQuery示例

1.首先通过转到文件>新建>动态Web项目来创建动态Web项目。

jsp使用ajax删除数据AJAX with JSP应用jQuery示例 Webpack

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标签中编写数据。

如果您碰着任何问题,请不才方评论。

快乐编码!!