JQuery方式实现Ajax

最新推荐文章于 2024-08-09 21:30:00 发布

you4580

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量86

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/you4580/article/details/129723305

版权

文章介绍了使用jQuery进行异步请求的三种方法：$.ajax，$.get和$.post。示例代码展示了如何设置请求参数、回调函数以及处理响应数据。AJAXServlet部分展示了服务器端如何接收和响应请求。

摘要由CSDN通过智能技术生成

文章目录
1.`$.ajax`
2.`$.get()`
3.`$.post()`
1.$.ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun(){
            $.ajax({
                //请求路径
                url:"ajaxServlet",
                //请求方式
                type:"POST",
                //请求参数
                data:{"username":"jack","age":30},
                //响应成功后的回调函数
                success:function(data){
                    alert(data);
                },
                //如果响应出现错误会执行的回调函数
                error:function(){
                    alert("出错啦");
                },
                //设置接收的响应数据格式
                dataType:"text"
            });
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>

AjaxServlet.java

import java.io.IOException;
@javax.servlet.annotation.WebServlet("/ajaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //打印username
        System.out.println(username);
        //响应
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doPost(request, response);
    }
}

2.$.get()
$.get(url, [data], [callback], [type])
参数：
　url:q请求路径
　data:请求参数
　callback:回调函数
　type:响应结果的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun(){
          $.get("ajaxServlet",{username:"rose"},function(data){
              alert(data);
          },"text");
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>

3.$.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun(){
          $.post("ajaxServlet",{username:"rose"},function(data){
              alert(data);
          },"text");
        }
    </script>
</head>
<body>