ajax简介及一个简单案例

最新推荐文章于 2023-11-21 13:31:26 发布

Francis_Ye

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量450

点赞数 1

分类专栏：前端文章标签： ajax web java

本文链接：https://blog.csdn.net/weixin_36302584/article/details/108647295

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajax学习记录

1.ajax简介
2. 一个简单案例

1.ajax简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

特点:局部刷新,异步访问.

问题: Ajax如何做到异步的??
答:因为有ajax引擎参与,使得请求由一个变为多个

下图为通过ajax来进行异步访问的示意图
在这里插入图片描述

2. 一个简单案例

注意：（1）本案例使用了些许SSM框架的知识，若无基础可前往我的SSM框架学习笔记看看。
（2）数据请根据代码自行模拟
（3）本案例只提供了与ajax演示有关的关键部分，其他缺失部分希望大家能够自行模拟

2.1 UserController.java

package com.jt.controller;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@Controller  //执行视图解析器代理.
public class UserController {

    @Autowired
    private UserMapper userMapper;
    
  	//访问ajax页面时，重定向到userAjax，然后会访问findAjax页面和方法，返回数据
    @RequestMapping("/ajax")
    public String toAjax(){
        return "userAjax";
    }

	//实现ajax业务调用,返回页面列表数据.
    @RequestMapping("/findAjax")
    @ResponseBody
    public List<User> findAjax(){

        return userMapper.selectList(null);
    }



}

2.2 UserAjax.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入JS函数类库 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    //让页面加载完成之后执行
	$(function(){

		//1.$.get("url地址","添加参数","回调函数","返回值结果类型 text/html/json....一般ajax会自动匹配.");
        $.get("/findAjax",function(data){
            //data = [{user},{user},{user}]  es6~jsp中冲突
            //需求: 将userList集合信息动态的添加到table中.

            var trs = null;
            $(data).each(function(index){
                //index代表循环遍历的下标从0开始
                var user = data[index];
                var id = user.id;
                var name = user.name;
                var age = user.age;
                var sex = user.sex;
                //最终需要在table中展现
                trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
            });

            //将结果追加到table中即可.
            $("#tab1").append(trs);
        });

		$.ajax({
		    type: "get",
            url: "/findAjax2",
            //data: {"id":"1","name":"tomcat"},
            data: "id=1&name=tomcat",
            success: function(data){
                alert("ajax调用成功!!!");
                alert(data);
            },
            async :  true,
            error :  function(data){
                alert("服务器异常,请稍后重试!!!!");
            }
		});

	})
</script>


<title>您好Springboot</title>
</head>
<body>
	<table id="tab1"  border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>学生信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th></th>
		</tr>
	</table>
</body>
</html>

2.3 结果分析

在访问对应的ajax页面时，重定向到userAjax页面，然后此页面加载完成前会访问后端的findAjax方法，获得并返回数据，之后将数据渲染到表格中展现

Francis_Ye

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax简介及一个简单案例

ajax学习记录1.ajax简介2. 一个简单案例2.1 UserController.java2.2 UserAjax.jsp2.3 结果分析1.ajax简介Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页
复制链接

扫一扫

专栏目录