JQury实现ajax异步请求

最新推荐文章于 2022-06-13 12:56:39 发布

时间不会赖着不走

最新推荐文章于 2022-06-13 12:56:39 发布

阅读量152

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/he1234555/article/details/112754891

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

第一种 $.ajax()

举例如下
ajax.html代码如下：
一定要记得提前在html文件中引用jquery，应该在web工程中运行，要记得启动tomcat。
实现点击按钮，异步实现获得弹出ajaxServlet的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
   
    //定义方法
    function  fun() {
        //使用$.ajax()发送异步请求

        $.ajax({
            url:"ajaxServlet" , // 请求路径
            type:"POST" , //请求方式
            //data: "username=jack&age=23",//请求参数
            data:{"username":"jack","age":23},
            success:function (data) {
                alert(data);
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...")
            },//表示如果请求响应出现错误，会执行的回调函数

            dataType:"text"//设置接受到的响应数据的格式
        });
    }


</script>
<body>

<input type="button" value="发送异步请求" onclick="fun();">



</body>
</html>

创建ajaxServlet



import javax.servlet.annotation.WebServlet;
import java.io.IOException;

@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 {
        //获取参数
        String username = request.getParameter("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请求

更简单
ajax.html写成下面这样，比上面更加简单了
语法：$.get(url, [data], [callback], [type])
参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>

    //定义方法
    function  fun() {
        //使用$.ajax()发送异步请求

       /* $.ajax({
            url:"ajaxServlet11" , // 请求路径
            type:"POST" , //请求方式
            //data: "username=jack&age=23",//请求参数
            data:{"username":"jack","age":23},
            success:function (data) {
                alert(data);
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...")
            },//表示如果请求响应出现错误，会执行的回调函数

            dataType:"text"//设置接受到的响应数据的格式
        });

*/
        $.get("ajaxServlet",{username:"rose"},function (data) {
            alert(data);
        },"text")
    }




</script>
<body>

<input type="button" value="发送异步请求" onclick="fun();">



</body>
</html>