How to pass a variable data into the html file

Question

How to pass a variable data into the html file

78 views Asked by Samsul Islam At 05 February 2024 at 21:57

`#[derive(Debug, Deserialize, Serialize)]
struct RangeParameters {
    start: usize,
    end: usize
}
use rand:: Rng;

async fn handler_random_number_generator(Query(params): Query<RangeParameters>) -> impl IntoResponse{
    let random_number = rand::thread_rng().gen_range(params.start..params.end);
    Html(include_str!("../index.html"))

}

I want to pass the random_number in the index.html file. How it is possible. Please help and pardon me for my English.

I want to pass the random_number in the index.html file. where in index.html exists a place holder. In html place holder I want to pass a variable, is this possible? please help.

Original Q&A

There are 2 answers

Napoleon Pro On 05 February 2024 at 22:55

I dont know if this will answer your question fully or partially but one way i can think of doing something like this is by using "DOM Manipulation".

Lets say you have the following HTML simple skeleton code with a simple

tag that you want to insert something inside it and after your string:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div>
    <p> hello world.  </p>
</div>
    
</body>
</html>

So in the above example we can insert the following lines of code with a simple Javascript script with tag and enter a random number inside our paragraph tag

. Then it becomes as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div>
    <p> hello world.  </p>
</div>

<script>
    const para = document.querySelector('p');
    console.log("before changing: ");
    console.log(para);
    console.log("after changing: ");
    let var1 = Math.random();
    para.innerText += "\nrandom number inserted is: \n";
    para.innerText += var1;
    console.log(para);
</script>
    
</body>
</html>

If you want to see how this is happening in the background then you can open this html, right click somewhere and click "inspect element" then navigate to the console tab and you can clearly see what is being changed.

Hope this helps a bit.

**Samsul Islam** · Accepted Answer · 2024-02-09T14:01:44+00:00

I have achived this by using askama create

Here is my code

struct RangeParameters {
    start: usize,
    end: usize
}

#[derive(Template)] // this will generate the code...
#[template(path = "hello.html")]
struct RandomNumber {
    random: usize
}
use rand:: Rng;

async fn handler_random_number_generator(Query(params): Query<RangeParameters>) -> impl IntoResponse{
    let random_number = rand::thread_rng().gen_range(params.start..params.end);
    let random = RandomNumber {
        random: random_number
    };
    Html(format!("{}", random.render().unwrap()))

}

TechQA.

How to pass a variable data into the html file

There are 2 answers

Related Questions in RUST-AXUM

Popular Questions

Popular Tags

Trending Questions