程序员社区

JQuery方式实现Ajax

文章目录

    • 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>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>

赞(0) 打赏
未经允许不得转载:IDEA激活码 » JQuery方式实现Ajax

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区