springboot前后端ajax传值，简单，实测

这两天一直在前后端搞来搞去。
试了三种，map获得表单提交值；model向前端传值，ajax向前端传值。

这里把controller代码和前端代码贴出来，详细记录一下ajax的。

data_controller.java

package com.example.demo.controller;import com.example.demo.bean.servlet_java;
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 javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.Map;@Controller
public class data_controller {static servlet_java rsa=new servlet_java(); //作为调用rsa算法的入口,rsa是一个对象，调用其方法。public static  String obvtext;public  static String ciphertext;public  static String rsa_mr;public  static String rsa_m;@RequestMapping("/get_obv" )//拿到了前台表单提交的数据@ResponseBodypublic Map<String,Object> post_data(HttpServletRequest request, HttpSession session,textinfo textinfo){obvtext=textinfo.getObvtext();ciphertext=textinfo.getCiphertext();Map<String,Object> map=new HashMap<String, Object>();rsa.rsa(obvtext,ciphertext);//这一步进行了运算等等map.put("success",true);rsa_mr=rsa.mr;rsa_m=rsa.last;//System.out.println(rsa.last);输出了最终明文结果return map;}//给前端html传值@RequestMapping("/rsa")public String trans_data(Model model){rsa.rsa_canshu();String p=rsa.midp;String q=rsa.midq;String e=rsa.mide;String d=rsa.midd;model.addAttribute("sty_p","<b>素数p为:</b>");model.addAttribute("p",(p+"<br>"));model.addAttribute("sty_q","<b>素数q为:</b>");model.addAttribute("q",(q+"<br>"));model.addAttribute("sty_e","<b >公钥e为:</b>");model.addAttribute("e",(e+"<br>"));model.addAttribute("sty_d","<b>私钥d为:</b>");model.addAttribute("d",(d+"<br>"));return "rsa";}@RequestMapping("/transdata")@ResponseBodypublic Map<String,Object> transdata(HttpServletRequest request){Map<String,Object> map = new HashMap<String, Object>();map.put("Mr",rsa_mr);map.put("M",rsa_m);return map;}}

前端rsa.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:inline="javascript" >
<head><script src="js/jquery.js" type="text/javascript"></script><meta charset="UTF-8"><title>RSA算法</title><style type="text/css">p {text-align: center;font-family: 微软雅黑;font-weight: bold;}span {text-align: center;}div {width: 220px;margin-top: 260px;margin-bottom: 100px;margin-left: 30px;margin-right:30px;}</style><script type="text/javascript" th:inline="javascript" >var request;var status;//一加载就进行function Dom() {var mtext = document.form1.obvtext.value;var ctext = document.form1.ciphertext.value;if (mtext == "") {alert("明文不可为空");}if (mtext != "" && ctext == "") {alert("密文不可为空");}document.getElementById("result").innerHTML = "<p>Alice选取的明文为:</p>" + mtext + "<br />"+ "<p>Trudy选取的r为:</p>" + ctext + "<br />";status=200;}document.forms[0].target = "rfFrame";function transdata() {var trandata;if(status!=200){alert("请先输入明文M与r");}else {$.ajax({url : "/transdata",dataType : "json",//数据格式type : "post",//请求方式async : false,//是否异步请求success : function(data) {   //如果请求成功，返回数据。alert(JSON.stringify(data));document.getElementById("result1").innerHTML=data.Mr+"<br/>"+"<br/>";document.getElementById("result2").innerHTML=data.M;},})}}</script>
</head>
<body>
<!-- 标题 -->
<div style="height: 30px;width: 100% ;margin-top: 10px;margin-bottom: -10px;"><p style="font-size:30px;">RSA加密算法</p>
</div><!-- 基本参数输出框 随输出改变大小--><div style="width:500px;margin-top:88px;word-wrap: break-word; height:auto;display:inline-block !important; display:inline;float:left;border:solid #4c4c4c"><p>素数p,q,密钥d,e等参数输出:</p><span style="font-size: 14px" th:utext="${sty_p}" ></span><span style="font-size: 12px" th:utext="${p}" ></span><span style="font-size: 14px" th:utext="${sty_q}" ></span><span style="font-size: 12px" th:utext="${q}" ></span><span style="font-size: 14px" th:utext="${sty_e}" ></span><span style="font-size: 12px" th:utext="${e}" ></span><span style="font-size: 14px" th:utext="${sty_d}" ></span><span style="font-size: 12px" th:utext="${d}" ></span></div>
<!-- 提交框 -->
<div style="float:left;border:solid #4c4c4c ;height:266px;margin-top: 210px ;"><form name="form1" style="text-align: center;" target="rfFrame" method="post" action="/get_obv"><iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe><p style="">Alice进行加密</p><span>请输入Alice选取的明文M:</span><input type="text" name="obvtext" id="obvtext" style="margin-top: 20px"><p>Trudy进行攻击</p><span>请输入Trudy选取的r:</span><input type="text" name="ciphertext" id="ciphertext" style="margin-top: 20px;"><input type="submit"  value="提交" style="font-weight: bold;margin-top:6px;display: flex;margin-left: 86px;" onClick="Dom()"></form>
</div><!-- 提交信息输出框 -->
<div style="height:auto;float:left;border:solid #4c4c4c;text-align: center;margin-top: 230px"><p style="">提交信息</p><span style="font-size: 14px" id="result" name="result"></span><input type="submit"  value="开始破解" style="margin-top:6px;display: flex;margin-left: 78px;margin-bottom: 10px;font-weight: bold;" onClick="transdata()">
</div>
<!-- 计算结果输出框 -->
<div style="height:auto;float:left;border:solid #4c4c4c;text-align: center;"><p style="">计算结果</p><span>由C^d=(Mr)^de,解得Mr为:</span><br/><span style="font-size: 14px" id="result1" name="Mr" > </span><span>由M=Mr/r解得明文M为:</span><br/><span style="font-size: 14px;margin-bottom: 10px" id="result2" name="M" > </span></div></body></html>

接下来总结一下ajax。
datatype为 text时，可以直接alert出文本，不用转格式，但是不能用键值对形式取值。
datatype为 json时，alert会显示object object，可以用方法alert(JSON.stringify(data));同样会显示文本；
用alert（data.Mr）可以直接取到键值对的value。
再用document.getElementById("result2").innerHTML=data.M;即可在html中显示。

springboot前后端ajax传值，简单，实测相关推荐

Android+SpringBoot前后端分离实现登录注册
Android+SpringBoot前后端分离实现登录注册一.登录 1.界面设计 2.Android端 (1)布局文件(activity_login) (2)java文件(LoginActivity ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
SpringBoot后台管理+Uniapp（混合APP）前端之酒店住宿+景点下单管理系统（SpringBoot前后端分离）
酒店住宿+景点下单管理系统(SpringBoot前后端分离) 之 SpringBoot后台管理+Uniapp(混合APP)前端 SpringBoot前后端分离项目-Thymeleaf模板引擎景区旅游管 ...
springboot前后端分离后权限原理浅谈
1. 需求描述最近在梳理springboot前后端分离后的权限管理问题.前段时间,已经把shiro的实现和spring security 的实现进行了初步的了解.如果深入细节,一个篇幅怕是不够.本文 ...
基于SpringBoot前后端分离的众筹系统（附源码）
基于SpringBoot前后端分离的众筹系统源码下载链接: https://download.csdn.net/download/weixin_47367099/85441573 一.运行步骤 1.环 ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...
springBoot前后端不分离Vue+elementUI脚手架
新建SpringBoot2.4.4项目. 目录结构如下新建html页面 login.js文件接口完整项目在我的资源中SpringBoot前后端不分离vue+element脚手架_springbo ...
基于vue springboot 前后端分离的电影院会员管理系统
基于vue springboot 前后端分离的电影院会员管理系统文章目录基于vue springboot 前后端分离的电影院会员管理系统前言一.主要功能二.运行截图 1.前端package. ...

springboot前后端ajax传值，简单，实测

springboot前后端ajax传值，简单，实测相关推荐

最新文章

热门文章