ajax异步请求学习（一）------显示学生单个信息

最新推荐文章于 2023-10-13 19:38:09 发布

如画无涯

最新推荐文章于 2023-10-13 19:38:09 发布

阅读量367

点赞数

分类专栏：笔记文章标签： ajax web jsp spring html

本文链接：https://blog.csdn.net/weixin_43288999/article/details/104715165

版权

笔记专栏收录该内容

27 篇文章 5 订阅

订阅专栏

文章目录

- Ajax介绍
- ajax实例显示学生信息

Ajax介绍

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax实例显示学生信息

为了在页面中发出ajax的请求导入jquery.js，在web目录新建js目录将其放入
导入可以转成json的jar包并配置
创建一个Student.java实体类

package com.oracle.pojo;

public class Student {
    private String name;
    private int age;

    public Student(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public Student() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

创建编写一个控制器组件ajaxAction.java，重点异步AJAX请求，都要使用ResponseBody注解

package com.oracle.controller;

import com.oracle.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
@RequestMapping("/admin")
public class ajaxAction {
    //显示学生信息,异步AJAX请求来的，都要使用ResponseBody注解
    @ResponseBody
    @RequestMapping("/showstu")
    public Student showstu() {
        Student stu = new Student("zh", 22);
        return stu;
    }
}

编写一个Ajax的请求页面，导入jQuery函数库，发出ajax请求


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <!--导入jQuery函数库-->
    <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    //发出ajax请求
    function show() {
        $.ajax({
            url:"${pageContext.request.contextPath}/admin/showstu.action",
            type:"post",
            dataType:"json",
            success:function (stu) {
                var s=stu.name+"----------"+stu.age;
                $("#showStu").html(s);
            },
            error:function (e) {
                alert(e.message);
            }
        });
    }
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<div id="showStu"></div>
</body>
</html>

运行结果
原始方法请求

ajax请求

如画无涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax异步请求学习（一）------显示学生单个信息

Ajax介绍Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。ajax实例显示学生信息为了在页面中发出ajax的请求导入jquery.js，在web目录新建js目录将其放入导入可以转成json的jar包并配置...
复制链接

扫一扫