利用jquery-ajax实现局部刷新

最新推荐文章于 2023-12-01 14:25:12 发布

wr456wr

最新推荐文章于 2023-12-01 14:25:12 发布

阅读量2k

点赞数 1

分类专栏：笔记软件质量保证与测试软件工程学习文章标签： java jquery ajax

本文链接：https://blog.csdn.net/wr456wr/article/details/121595569

版权

笔记同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

软件工程学习

8 篇文章 0 订阅

订阅专栏

软件质量保证与测试

7 篇文章 0 订阅

订阅专栏

文章目录

使用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);
    }
}

关于更具体的jquery的ajax方法和参数

关于更具体的jquery的ajax方法和参数可以参考：（w3school的教程）

https://www.w3school.com.cn/jquery/ajax_ajax.asp

关于跨域访问

跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明示例

域名不同 www.jd.com 与 www.taobao.com

域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081

二级域名不同 item.jd.com 与 miaosha.jd.com

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：

www.jd.com/item

www.jd.com/goods

资料参考：
https://www.w3school.com.cn/jquery/ajax_ajax.asp
https://blog.csdn.net/Wen__Fei/article/details/101458322

wr456wr

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
利用jquery-ajax实现局部刷新

文章目录使用jquery实现局部刷新后端使用springMVC模式进行数据处理后端使用Servlet进行数据处理关于更具体的jquery的ajax方法和参数关于跨域访问使用jquery实现局部刷新后端使用springMVC模式进行数据处理前端测试代码：<%@ page contentType="text/html; UTF-8" pageEncoding="UTF-8" %><html><body>内容：<p id="pp" onmouseover
复制链接

扫一扫