package com.tyut.controller;
import com.tyut.pojo.MyDialogData;
import com.tyut.pojo.traveller;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.google.gson.Gson;
import org.springframework.web.servlet.ModelAndView;
import java.io.IOException;
import java.io.InputStream;
@Controller
@RequestMapping("/submitOrder")
public class SubmitOrderController {
@PostMapping(produces = MediaType.TEXT_PLAIN_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
public ModelAndView submitOrder(@RequestBody MyDialogData dialogData) throws IOException {
System.out.println(dialogData);
System.out.println("baibaibai");
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("submitOrder");
return modelAndView;
}
}
package com.tyut.pojo;
public class MyDialogData {
private String myDialogData;
public MyDialogData() {
// 默认无参构造函数
}
public String getMyDialogData() {
return myDialogData;
}
public void setMyDialogData(String myDialogData) {
this.myDialogData = myDialogData;
}
}
<%--
Created by IntelliJ IDEA.
User: 86130
Date: 2024/1/11
Time: 21:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>选择乘客</title>
<%-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.6.0.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-image: url("${pageContext.request.contextPath}/img/03.jpg");
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
align-items: center;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
}
.add_passengers {
justify-content: flex-start;
display: flex;
}
.over {
flex: 1;
justify-content: flex-end;
display: flex;
}
#myButton {
background-color: orange;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#myButton:hover {
background-color: orange;
}
#myButton0 {
background-color: orange;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#myButton0:hover {
background-color: orange;
}
#closeButton {
background-color: orange;
border: none;
color: white;
padding: 10px 20px;
position: absolute;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#closeButton:hover {
background-color: orange;
}
#myDialog {
display: none;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
}
#myDialog h3 {
margin-top: 0;
}
.selectedOptions {
font-size: 18px;
line-height: 1.5;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>选择乘客</h1>
<div class="container">
<c:forEach items="${rootList}" var="rootList">
<form method="post">
<br class="form-group">
<label>
<input type="checkbox" id="option" value=${rootList.root}> ${rootList.root}
</label>
</form>
</c:forEach>
<span class="add_passengers"><a href="/0110_Web_exploded/selects">
<button type="button" id="myButton0">新增旅客</button></a>
<button id="myButton">提交订单</button>
</span>
<%-- <button id="myButton">提交订单</button>--%>
<div id="myDialog">
<h3>选中的乘客</h3>
<p id="selected"></p>
<button id="closeButton">确认支付</button>
</div>
</div>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var selectedOptions = [];
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
for (var i = 0; i < checkboxes.length; i++) {
selectedOptions.push(checkboxes[i].value);
}
document.getElementById('selected').innerHTML = selectedOptions.join("<br>");
document.getElementById('myDialog').style.display = 'block';
var myDialogData = document.getElementById('myDialog').innerHTML;
});
document.getElementById('closeButton').addEventListener('click', function() {
document.getElementById('myDialog').style.display = 'none';
var myDialogData = document.getElementById('selected').innerHTML;
var requestData = { myDialogData: myDialogData };
$.ajax({
url: '${pageContext.request.contextPath}/submitOrder',
type: 'POST',
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify(requestData),
success: function(response) {
console.log(response);
alert(myDialogData);
// alert('支付成功!');
},
error: function(xhr, status, error) {
// 处理错误响应
console.log(error);
alert('支付失败!');
}
});
});
// document.getElementById('closeButton').addEventListener('click', function() {
// alert('支付成功!');
// });
</script>
</body>
</html>
后端老是取不到数据MyDialogData,但是改成String能取到