我想在按钮标签中为 onClick 传递一个 Rust 函数。我知道如何传递变量,但不知道如何传递函数。
下面是我的 rust 文件,我在其中调用路线:
use rocket_dyn_templates::{context, Template};
use serde::Serialize;
#[derive(Serialize)]
struct Context {
prompt: String,
}
#[macro_use]
extern crate rocket;
fn submit(prompt: String) {
println!("value is {prompt}");
}
#[get("/")]
fn index() -> Template {
let prompt: String = "".to_string();
Template::render("index", context! { field: prompt })
}
#[launch]
fn rocket() -> _ {
rocket::build()
.mount("/", routes![index])
.attach(Template::fairing())
}
我的html文件:
<head>
<style type="text/css">
<title>Generator Image</title>body {
background: #1a6875;
font-family: Arial, Helvetica, sans-serif;
}
.container-prompt {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
}
.submit-prompt {
margin: 0;
}
</style>
</head>
<body>
<div class="container-submit">
<div class="submit-prompt">
<input method="text" name="prompt" id="prompt"/>
<button onClick="">Submit</button>
</div>
</div>
</body>
最后,我想在单击按钮时使用 rust 函数的输入标记中使用的变量提示作为参数。
谢谢。
一种可能性是为提交按钮创建新路线。
实现会是这样的:
struct Prompt(String);
#[rocket::async_trait]
impl<'r> FromRequest<'r> for Prompt {
type Error = rocket::http::uri::error::Error<'r>;
async fn from_request(request: &'r Request<'_>) -> Outcome<Self, Self::Error> {
let query = request.uri().query().unwrap();
println!("{:?}", query);
let query_segments: Vec<_> = query.segments().collect();
let mut prompt: Option<String> = None;
for segment in query_segments {
if segment.0 == "prompt" {
prompt = Some(segment.1.to_string());
break;
}
}
Outcome::Success(Prompt(prompt.unwrap_or_default()))
}
}
#[get("/submit")]
fn submit(prompt: Prompt) -> String {
println!("value is {}", prompt.0);
format!("Hello {}", prompt.0)
}
然后,您可以这样做:
,而不是使用 onclick 函数 <div class="submit-prompt">
<input method="text" name="prompt" id="prompt" onchange="prompt()"/>
<a href="/" id="anchor">
<button>Submit</button>
</a>
</div>
提示功能将是(您可以将其包含在头部,就在结束样式标签下方):
<script>
function prompt() {
let prompt = document.getElementById('prompt');
let anchor = document.getElementById('anchor');
anchor.href = "/submit?prompt=" + prompt.value;
}
</script>
基本上,它的作用是为任何对路由“/submit”的 GET 请求创建一个新的处理程序。如果有对提交路由的请求,那么它将从请求中检索提示查询(例如,如果请求 uri“/submit?prompt=hello”,则提示将为“hello”)并显示它们到控制台和客户端。 javascript 检索提示文本和锚标记,并将锚标记的链接设置为“/submit?prompt=input_value”,以便提交按钮转到正确的位置。
希望这能解决问题......快乐编码!!!!