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

最新推荐文章于 2024-08-02 16:43:28 发布

乱搭巴士

最新推荐文章于 2024-08-02 16:43:28 发布

阅读量1.1k

点赞数

分类专栏：个人学习_本科生文章标签： springboot ajax

本文链接：https://blog.csdn.net/qq_45128278/article/details/103222665

版权

个人学习_本科生专栏收录该内容

61 篇文章 0 订阅

订阅专栏

这两天一直在前后端搞来搞去。
试了三种，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" )//拿到了前台表单提交的数据
    @ResponseBody
    public 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")
    @ResponseBody
    public 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中显示。