[JAVA EE]ajax 方式提交数据

最新推荐文章于 2022-05-20 00:29:08 发布

CN-Dust

最新推荐文章于 2022-05-20 00:29:08 发布

阅读量234

点赞数 2

分类专栏：前端学习学习笔记文章标签： ajax java jquery

本文链接：https://blog.csdn.net/qq_36286039/article/details/120090753

版权

前端学习同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

学习笔记

66 篇文章 3 订阅

订阅专栏

前端界面：Form表单
前端数据提交：使用 ajax 方式 ( 基于jquery )

在这里插入图片描述
后台代码：
TestController.java

@Controller
public class TestController {


    @RequestMapping("/form")
    public String test(){
        return "th/form";
    }

    @RequestMapping("/test1")
    @ResponseBody
    public Student test1(@RequestParam("id") Integer id, @RequestParam("name") String name) {
        Student s=new Student();
        s.setId(id);
        s.setName(name);
        return s;
    }

}

前端代码：（注重script部分）
form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal">
    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">学号</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="id" placeholder="请输入学号">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <button id="btn" class="btn btn-default" type="button">提交</button>
        </div>
    </div>
</form>
<script>
    $(document).ready(function () {
        $('#btn').click(function (e) {
            var param = {
                "id": $('#id').val(),
                "name": $('#name').val()
            };
            $.ajax({
                url: "/test1", //请求的路径
                data: param, //传给后台的数据（一般使用json格式）
                type: "post", //post请求
                dataType: "json", //后台返回数据的类型
                success: function (data) { //data为后台返回的结果
                    console.log(data.id);
                    console.log(data.name);
                }
            });
        });
    });
</script>
</body>
</html>

Ajax介绍

Ajax就是JS这个语言和服务端交互的手段。
Ajax 全名 async javascript and XML(异步JavaScript和XML)
是前后台交互的能⼒，也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
Ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
是⼀个默认异步执⾏机制的功能，Ajax分为同步（async = false）和异步（async = true）

什么是同步请求？(false)

同步请求是指当前发出请求后，浏览器什么都不能做。
必须得等到请求完成返回数据之后，才会执行后续的代码。
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态。
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

什么是异步请求？(默认:true)

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

Jquery Ajax 支持哪些数据类型

xml：返回xml文档，可用于jQuery处理
html：返回纯文本html信息，包含的script标签会插入dom执行
script：返回纯文本JavaScript代码，不会自动缓存结果
json：返回json数据
jsonp：json格式。使用json形式调用函数
text：纯文本字符串

CN-Dust

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
[JAVA EE]ajax 方式提交数据

前端界面：Form表单前端数据提交：使用 ajax 方式 ( 基于jquery )后台代码：TestController.java@Controllerpublic class TestController { @RequestMapping("/form") public String test(){ return "th/form"; } @RequestMapping("/test1") @ResponseBody .
复制链接

扫一扫