【Demo】idea搭建SpringBoot和AJAX前后端数据交互

此文章详细介绍了idea 搭建springboot步骤,以及简易的前后端通过ajax进行简单数据交互代码,二话不说,进入正题。
第一步、idea开发工具搭建springboot框架
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
来看下整个项目结构
在这里插入图片描述

第二步、pom依赖(自动生成的的不管就好)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

第三步、新建controller包

package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("demo")
public class indexController {

    @RequestMapping("")
    public String show(){
        return "index";
    }

    @RequestMapping("/index")
    public String index(@RequestParam("text") String text){
        System.out.printf("接收前端值:"+text);
        return "index";
    }

}

第四步、静态目录下添加并编写前端代码

1、配置文件添加代码

    thymeleaf.prefix: classpath:/templates/
    thymeleaf.suffix: .html
    thymeleaf.mode: HTML
    thymeleaf.encoding: UTF-8
    thymeleaf.servlet.content-type: text/html
    thymeleaf.cache: false
    resources.static-locations: classpath:/static/
    mvc.static-path-pattern: /static/**

2、编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<input id="text" type="text" name="text" placeholder="请输入文本" />
<button id="ok">ok</button>

</body>
</html>
<script>
    document.getElementById("ok").onclick = function(){
        $.ajax({
            async: false,
            type: "POST",
            url: "http://localhost:8080/demo/index",
            data:{text:document.getElementById("text").value},
            // dataType:"JSON",
            success: function (data) {
               alert("success");
            }

        });

    }
</script>

运行
在这里插入图片描述
在这里插入图片描述

友情Tip:
程序代写、设计代做(毕设)、软件定制,价格优惠,有需要就点击程序客栈,或者联系博主

  • 0
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

YALO-LinDo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值