【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: .htmlthymeleaf.mode: HTMLthymeleaf.encoding: UTF-8thymeleaf.servlet.content-type: text/htmlthymeleaf.cache: falseresources.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：
程序代写、设计代做（毕设）、软件定制，价格优惠，有需要就点击程序客栈，或者联系博主

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

Ajax 前后端数据交互
ajax 数据交互今天又是奋斗的一天,行吧,来学习ajax ajax 数据交互什么是ajax? ajax的`优势` ajax的使用创建一个ajax对象配置这个对象发送请求接受返回过来的数据 ...
SpringBoot+Jquery实现前后端数据交互
场景在企业架构管理中,可以实现启用和禁用功能. 在启用或者禁用前需要先验证是否已经是启用或禁用状态. 所以在前端Jquery中需要将数据库中要查询的id传递到后台. 后台根据Id查询状态,然后返回给 ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...

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

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

最新文章

热门文章