Yes, thsi is the extractor function:
#[post("/result")]
async fn show_result(
data: web::Data<Mutex<Repl>>,
params: web::Form<InputCodes>
) -> impl Responder {
// let code_str = params.name.replace('\r', "").parse_all();
println!("{:?}", params);
let code_str = params.name.to_owned();
let res = data.lock().unwrap().eval(&code_str).unwrap();
let res = format!("the code input: {:?} \n, the res: {:?}", params.name, res);
println!("{res}");
HttpResponse::Ok()
.content_type("text/plain; charset=utf-8")
.body(res)
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
// .wrap(Logger::default())
.service(say_hello)
.service(Files::new("/codemirror", "./templates/codemirror").show_files_listing())
.service(show_html)
.app_data({
let repl = get_repl();
let mutex_repl = Mutex::new(repl);
web::Data::new(mutex_repl)
})
.service(show_result)
})
.bind(("127.0.0.1", 8081))?
.run()
.await
}
The params
is still a type of Form
.
This is the whole html file:
<!doctype html>
<html>
<head>
<title>Online Strategy</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/mode/simple.js"></script>
<script src="codemirror/mode/rust/rust.js"></script>
<link rel="stylesheet" href="codemirror/theme/dracula.css">
</head>
<body>
<form id="getData">
<textarea id="editor" name="name"></textarea>
<button type="submit">Run</button>
</form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
lineNumbers: true,
lineWrapping: true,
indentUnit: 2,
tabsize: 2,
indentWithTabs: 1,
mode: "rust",
theme: "dracula",
});
editor.setSize(700, 700);
editor.scrollTo(700, 700);
async function GetData(event) {
// event.target is reference to the form element
const data = new FormData(event.target); // Get all input data
fetch("http://127.0.0.1:8081/result", {
method: "POST",
headers: new Headers({'content-type': 'application/x-www-form-urlencoded'}),
body: data, // Send body
})
.then((response) => {
var upperCase = response.json();
console.log("____", event.target);
console.log("aaaa", data);
console.log("dddd", upperCase);
// var upperCase = upperCase.toUpperCase();
// document.getElementById("outputText").innerHTML = upperCase;
})
.then((response) => {
console.log("gggg");
for (const product of data.products) {
console.log("ddd", product);
}
setStatusMessage(response.status);
})
.catch(() => {
console.log("zzz");
setStatusMessage("ERROR");
})
}
const form = document.getElementById("getData")
form.addEventListener("submit", (event)=>{
event.preventDefault()
GetData(event)
})
</script>
<h3>INPUT</h3>
<textarea id="inputText" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
<button onclick="MakeUpper()">Enter</button>
<h3>OUTPUT</h3>
<textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>
<script>
function MakeUpper() {
var upperCase = document.getElementById("inputText").value;
var upperCase = upperCase.toUpperCase();
document.getElementById("outputText").innerHTML = upperCase;
}
</script>
</body>
</html>
I tried using content-type as 'application/json', but it has the following error:

So, I have to change it to 'application/x-www-form-urlencoded'.