Ajax实现方式（JQ）:ajax()、get、post

最新推荐文章于 2024-09-10 11:01:42 发布

Mike-H

最新推荐文章于 2024-09-10 11:01:42 发布

阅读量235

点赞数

分类专栏： java_web

本文链接：https://blog.csdn.net/QLBFA/article/details/110632699

版权

java_web 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

Ajax实现方式（JQ）

一、方法1 $.ajax()

语法： $ajax({键值对}); //使用$ .ajax()发送异步请求

ajax要和服务器交互，故要依赖与tomcat。
把jquery-3.3.1.min.js放进js目录，创建cn.itcast.web.ajax包，创建AjaxServlet 的servlet类在这里插入图片描述

package cn.itcast.web.ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author QLBF
 * @version 1.0
 * @date 2020/12/4 12:12
 */
@WebServlet("/ajaxServlet ")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数,下面js文件传过来的
        String username = request.getParameter("username");
		String age = request.getParameter("age");
        /* //处理业务逻辑。耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.打印username
        System.out.println(username);

        //响应
        response.getWriter().write("hello:"+username+" age"+age);
    }

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

在web目录直接创建一个shixian_1.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax实现方式1</title>
    <%--导入jq必要包--%>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       
        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求

            $.ajax({
                url:"ajaxServlet" , // 写你要访问的请求路径
                type:"POST" , //请求方式,不写默认为get
                //data: "username=jack&age=23",//请求参数
                data:{"username":"mike2","age":23},//写你要发送的参数
                success:function (data) {
                    alert(data);
                },//z这里的data是形参，不是上面请求的data，这是响应成功后的回调函数,data是服务器servlet传过来的响应参数(是servlet设置的response.getWriter().write，若没有则不会弹出)

                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误(例如请求路径写错)，会执行的回调函数
                
                dataType:"text"//设置接受到的响应数据的格式，一般为json，最后一个键值对后面可不要“,"
            });

        }
    </script>
</head>
<body>

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

</body>
</html>

注意success:function 和error里面不能加注释，否则alert出错

浏览器访问http://localhost:8080/shixian_1.jsp 在这里插入图片描述

这时服务器响应给它的信息已经alert出来了，同时控制台输出：
在这里插入图片描述

二、方法2 $.get() 和 $.post()：（更简单）

$.get()：发送get请求

语法：$.get(url, [data], [callback], [type])
参数：
url：请求路径
data：请求参数
callback：回调函数(就类似上面的success)
type：响应结果的类型

$.post()：发送post请求

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

get:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax实现方式之get</title>
    <%--导入jq必要包--%>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function  fun() {
            //这里路径不要写/
            $.get("ajaxServlet",{"username":"rost_get","age":25},function (data) {
                alert(data)
            },"text")
        }
    </script>
</head>
<body>

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

</body>
</html>

在这里插入图片描述

post和get一样，只是名字不同而已：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax实现方式之post</title>
    <%--导入jq必要包--%>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function  fun() {
            //这里路径不要写/
            $.post("ajaxServlet",{"username":"rost_post","age":99},function (data) {
                alert(data)
            },"text")
        }
    </script>
</head>
<body>

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

</body>
</html>