[JavaScript知识库] 利用jquery-ajax实现局部刷新

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 利用jquery-ajax实现局部刷新 -> 正文阅读

[JavaScript知识库]利用jquery-ajax实现局部刷新

文章目录

使用jquery实现局部刷新

后端使用springMVC模式进行数据处理

前端测试代码：

<%@ page contentType="text/html; UTF-8" pageEncoding="UTF-8" %>
<html>
<body>

内容：
<p id="pp" onmouseover="change()" onmousedown="change2()">
    click
</p>
<p id="ppp"></p>
</body>
<script src="/js/jquery-3.6.0.min.js"></script>

<script>
//当鼠标在文字上方改变颜色
    function change(){
        document.getElementById("pp").style.color = "red";
    }
//当鼠标按下
    function change2(){
    //id为pp的元素颜色变为黑色
        document.getElementById("pp").style.color = "black";

        //console.log("i will begin");
        $.ajax({
			//请求的url地址
            url:"/Test/test",
            //请求的返回数据类型
            dataType:"text",
            //向后台发送的数据
            data:{
                data:"this is a data"
            },
            //请求成功后调用的函数
            //data为后端返回的数据
            success:function (data){
                //console.log("i am success");
                //将id为ppp的元素内容改为data的内容
                $("#ppp").text(data);
                //console.log(data);
            },
            //请求失败后调用的函数
            error:function (){
                //console.log("i am false");
                //出现错误在id为ppp的地方输出error
                $("#ppp").text("error");
            }
        })
        //console.log("i am over");
    }

</script>
</html>

后端的处理代码：


@RequestMapping("/Test/")
@Controller
public class Test {
    @RequestMapping("test")
    @ResponseBody
    public void test(@Parameters String data,HttpServletResponse response) throws IOException {

        System.out.println("i got it");
        System.out.println(data);
        //对接收到的数据进行处理
        data = "this is a new data";
        //向前台返回数据
        response.getWriter().write(data);

    }
}

在这里插入图片描述
点击click后

在这里插入图片描述

后端使用Servlet进行数据处理

前端的代码：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
</head>
<body>
<h1><%= "Hello World!"%>
</h1>
<br/>
<p id="pp" onmouseover="change()" onmousedown="fun()">click me</p>
<p id="ppp"></p>
</body>
<script src="jquery-3.6.0.min.js"></script>
<script>
    function change(){
        document.getElementById('pp').style.color = "red";
    }

    function fun(){
        document.getElementById('pp').style.color = "black";
        console.log("i will begin");
        $.ajax({
            url:"/Servlet2",
            dataType:"text",
            data:{
                data:"this is a data"
            },
            success:function (data){
                console.log(data);
                $("#ppp").text(data);
            },
            error:function (){
                $("#ppp").text("error");
            }
        })
        console.log("i am over");
    }

</script>

</html>

后端的java代码：

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "Servlet2", value = "/Servlet2")
public class Servlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String data = request.getParameter("data");
        System.out.println(data);
        data = "this is new data";
        response.getWriter().write(data);
    }
}