Обратный вызов Onclick с методом выборки на языке Html
У меня есть следующий html-код:
<!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>
<iframe name = "dummyframe" id = "dummyframe" style = "display: none;"></iframe>
<form action='/result' method=POST target = "dummyframe">
<textarea id = "editor" name = "name"></textarea>
<button onclick=GetData()>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() {
console.info("my ssss");
fetch("http://127.0.0.1:8081/result", { method: "POST" })
.then((response) => {
var upperCase = response.json();
console.info("dddd");
// var upperCase = upperCase.toUpperCase();
// document.getElementById("outputText").innerHTML = upperCase;
})
.then((response) => {
console.info("gggg");
setStatusMessage(response.status);
})
.catch(() => {
console.info("zzz");
setStatusMessage("ERROR");
})
}
</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>Я пытаюсь сделать следующее:
- Я ввожу некоторый текст в первую текстовую область, затем нажимаю кнопку «Выполнить», затем в URL-адресе 127.0.0.1/результат будет ответ
- Я получаю ответ и вставляю тело во вторую текстовую область.
Но он не работает должным образом, у него ошибка 404 not found.
Что я делаю не так?
Серверная часть такая:
#![allow(unused_imports)]
use std::time;
use actix_web::{
middleware, web, App, HttpRequest, HttpResponse, HttpServer, Responder, Result,
get,
post,
http::{
header::{self ,ContentType},
Method, StatusCode,
}
};
use actix_files::Files;
use serde::{Serialize, Deserialize};
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.service(get_html)
.service(show_result)
})
.bind(("127.0.0.1", 8081))?
.run()
.await
}
#[get("/")]
async fn get_html() -> impl Responder {
HttpResponse::Ok()
.content_type("text/html")
.body(include_str!("../form2.html"))
}
#[post("/result")]
async fn show_result(params: web::Form<InputCodes>) -> impl Responder {
let mut res = format!("your input is {}, and I have got it in {:?}", params.name, time::Instant::now());
HttpResponse::Ok()
.content_type("text/plain")
.body(res)
}
#[derive(Serialize, Deserialize)]
pub struct InputCodes {
pub name: String
}
какие-то коды ржавчины. Функция show_result обрабатывает публикацию формы и записывает какое-то слово на веб-страницу /result.
Он пустой, ничего не содержит.
Данные объекта не имеют метода toUpperCase.
Да, я делаю строки как комментарии, но результат тот же. Консоль html говорит, что ошибка 404 не найдена.
Вам нужен какой-то сервер для вызова. Можете ли вы добавить реализацию сервера?
Вы звоните /result API, но где API?
Я добавляю коды на стороне сервера выше. Код может быть трудночитаемым, но функция проста, функция show_result обрабатывает сообщение формы и записывает некоторый текст в тело /result.
Можете ли вы попробовать изменить fetch("/result") на fetch("http://127.0.0.1:8081/result")
Кроме того, вы GET работаете, но ваш сервер настроен на обработку POST только для этого URL.
Я только что попробовал то, что вы указываете, у него та же ошибка. @кеннардд
Да, я думаю, это проблема. Кроме POST и GET, какой метод выбрать? (я новичок в html, так что извините, если это глупый вопрос) @RobbyCornelissen
@dfadfdff fetch("http://127.0.0.1:8081/result", { method: "POST" }) измените способ публикации.
@dfadfdff Кроме POST и GET вы можете использовать PUT, PATCH, DELETE и т. д. developer.mozilla.org/en-US/docs/Web/HTTP/Methods.
Я не вижу GetData звонят.
@kennarddh, извините, для удобства чтения я не вставил весь код. Я просто изменил его на полный код выше, включая упомянутое вами изменение. Затем появляется новая ошибка 400 bad Request
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы хотите использовать пользовательскую выборку для отправки формы. Вам не нужны атрибуты action и method.
<form id = "getData">
<textarea id = "editor" name = "name"></textarea>
<button type = "submit">Run</button>
</form>
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",
body: data, // Send body
})
.then((response) => {
var upperCase = response.json();
console.info("dddd", upperCase);
// var upperCase = upperCase.toUpperCase();
// document.getElementById("outputText").innerHTML = upperCase;
})
.then((response) => {
console.info("gggg");
setStatusMessage(response.status);
})
.catch(() => {
console.info("zzz");
setStatusMessage("ERROR");
})
}
const form = document.getElementById("getData")
form.addEventListener("submit", (event)=>{
event.preventDefault()
GetData(event)
})
Большое спасибо за вашу помощь. Еще один вопрос: когда я нажимаю кнопку «Выполнить», страница переходит на другую страницу. Как я могу просто остаться на исходной странице, чтобы видеть журнал консоли?
Я отредактировал ответ. Я изменил onsubmit = "GetData()" на onsubmit = "GetData".
Я только что попробовал измененный код, он все еще переходит на другую страницу, внешний вид которой такой же, как и у исходной, но они не совсем такие же, потому что ввод в первой текстовой области ушел. И нет больше пользовательского журнала консоли.
Я отредактировал ответ. Можешь попробовать?
Я только что попробовал это, у него есть следующее сообщение об ошибке: Response { type: "basic", url: "127.0.0.1:8081/result", перенаправлено: false, status: 400, ok: false, statusText: " Bad Request», заголовки: Headers(3), тело: ReadableStream, bodyUsed: false }
Ответ от «XHR POSThttp://127.0.0.1:8081/result» показывает: Ошибка типа содержимого.
Можешь попробовать записать params: web::Form<InputCodes> это
С измененным кодом кажется, что функция ржавчины show_result никогда не вызывается, поэтому она не может распечатать «параметры». С исходными кодами я напечатал params: web::Form<InputCodes> в терминале ржавчины, он показывает это: Form(InputCodes { name: "let a = 1;" }).
Я пытаюсь расставить все точки: 1. В html-файле две textarea, в первой я ввожу текст; 2. Затем я нажимаю кнопку, в моем воображении текст отправляется в сообщение; 3. функция сервера show_result получает текст в качестве параметров, обрабатывает параметры и возвращает некоторый возвращаемый объект; 4. возвращаемый объект лежит в 127.0.0.1/result, затем я извлекаю тело и показываю его во второй текстовой области (из html-файла).
Я никогда не использовал ржавчину, поэтому я действительно не понимаю
Так что же произойдет, если вы получите доступ к
http://127.0.0.1/resultпрямо в браузере?