jquery ajax示例_使用jQuery示例的带有JSP的AJAX

最新推荐文章于 2022-05-17 13:50:18 发布

culing2941

最新推荐文章于 2022-05-17 13:50:18 发布

阅读量371

点赞数

文章标签： java python ajax js vue ViewUI

原文链接：https://www.thecrazyprogrammer.com/2016/02/ajax-with-jsp-using-jquery-example.html

版权

jquery ajax示例

Here you will get an example of AJAX with JSP using jQuery.

在这里，您将获得一个使用jQuery的带有JSP的AJAX示例。

AJAX is used for sending and receiving data from server without reloading the page. We can implement AJAX easily using jQuery. It provides various methods for AJAX functionality.

AJAX用于在不重新加载页面的情况下从服务器发送和接收数据。我们可以使用jQuery轻松实现AJAX。它提供了各种AJAX功能的方法。

I have created this example using Eclipse IDE. Below I have shared detailed steps for this.

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

使用jQuery示例的带有JSP的AJAX (AJAX with JSP Using jQuery Example)

1. First create dynamic web project by going to File>New>Dynamic Web Project.

1.首先通过转到File> New> Dynamic Web Project来创建动态Web项目 。

2. Now give any name and click on Finish to create the project.

2.现在输入任何名称，然后单击完成以创建项目。

3. To use jQuery in our code we need to download the jQuery library. Go to below link and download the development version of jQuery library.

3.要在我们的代码中使用jQuery，我们需要下载jQuery库。转到下面的链接并下载jQuery库的开发版本。

Download link: https://jquery.com/download/

下载链接： https : //jquery.com/download/

4. After that copy and paste it in WebContent folder in your project. See below screenshot.

4.之后，将其复制并粘贴到项目中的WebContent文件夹中。请参见下面的屏幕截图。

5. Create two files index.jsp and content.jsp in WebContent folder. Copy and paste following code in respective files.

5.在WebContent文件夹中创建两个文件index.jsp和content.jsp 。将以下代码复制并粘贴到相应的文件中。

index.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 (content.jsp)

<%out.print("This is AJAX with JSP using jQuery");%>

6. Finally run your project on server.

6.最后，在服务器上运行项目。

输出量 (Output)

说明 (Explanation)

The jQuery code is written inside head section. For using jQuery library we have to include it on our page. I have done this by providing the source of library in <script src=””></script> tag.

jQuery代码写在头部分中。为了使用jQuery库，我们必须将其包含在页面中。我通过在<script src =””> </ script>标记中提供库的源来完成此操作。

When we click on Show button, the get() function handles AJAX GET request and fetch data from server. Its first argument is the url of the page from where data is to be fetched. In second argument another function is called, the information fetched from server is stored in data. Finally we are writing the data in h2 tag using html() function.

当我们单击Show按钮时， get()函数处理AJAX GET请求并从服务器获取数据。它的第一个参数是要从中获取数据的页面的url。在第二个参数中，另一个函数被调用，从服务器获取的信息存储在data中 。最后，我们使用html()函数将数据写入h2标签。

Comment below if you are facing any problem.

如果您遇到任何问题，请在下面评论。

Happy Coding!! 🙂 🙂

快乐编码！ 🙂

翻译自: https://www.thecrazyprogrammer.com/2016/02/ajax-with-jsp-using-jquery-example.html

jquery ajax示例

culing2941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax示例_使用jQuery示例的带有JSP的AJAX

jquery ajax示例Here you will get an example of AJAX with JSP using jQuery. 在这里，您将获得一个使用jQuery的带有JSP的AJAX示例。 AJAX is used for sending and receiving data from server without reloading the page. We can i...
复制链接

扫一扫