JavaScript / Ajax - перейти по URL с содержимым формы
Я пытаюсь заставить пользователя вставить customer_id, а затем получить URL-адрес для перехода на эту страницу.
Вкл: http: // локальный: 8080 / viewCustomer.html, я хочу, чтобы пользователь ввел customer_id, а затем я хочу, чтобы URL-адрес перешел на http: // локальный: 8080 / клиенты / {customer_id}.
Я пробовал искать решения здесь, но они не работают.
URL результата, который я получаю, - "http: // локальный: 8080 / viewCustomer.html? customer_id = 1".
Вот мой код:
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
// $("#submit").submit(function (event) {
// $customer_id = $_POST["customer_id"];
// var newURL = 'http://localhost:8080/customers/' + $customer_id;
// xhttp.open("GET", newURL, true);
// xhttp.send();
// }
// );
function changeFormAction() {
window.location.href = "http://localhost:8080/" + document.getElementById("customer_id");
}
</script>
</head>
<body>
<h1>Bank Management - View Customer</h1>
<h3>Please complete of the following:</h3>
<form onsubmit = "changeFormAction()">
Customer ID:<br>
<input type = "text" name = "customer_id" id = "customer_id">
<br>
<button type = "submit" onclick = "">Submit</button>
</form>
</body>
</html>
@JamesS в NetBeans. Это веб-приложение Maven.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы включили две древние версии jQuery. Вы должны включать jQuery только один раз и в идеале использовать последнюю версию.
Как только вы это сделаете, ваш код должен работать следующим образом - вам нужно дать вашей форме идентификатор, обработать «отправить» в форма (кнопки не имеют события отправки), остановить поведение обратной передачи по умолчанию и использовать jQuery $ .ajax () для простой отправки запроса ajax.
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(function() {
$("#customerForm").submit(function(event) {
event.preventDefault();
$.ajax({
type: "GET",
url: "http://localhost:8080/customers/" + $("#customer_id").val(),
}).done(function(response) {
console.info(response);
}).fail(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<h1>Bank Management - View Customer</h1>
<h3>Please complete the following:</h3>
<form id = "customerForm">
Customer ID:<br>
<input type = "text" name = "customer_id" id = "customer_id">
<br>
<button type = "submit">Submit</button>
</form>
</body>
Вот некоторые ссылки на документацию по теме:
http://learn.jquery.com/using-jquery-core/document-ready/
https://api.jquery.com/submit/
https://api.jquery.com/event.preventdefault/
https://api.jquery.com/jquery.ajax/
К сожалению, это не сработало. :( URL просто меняется на http://localhost:8080/viewCustomer.html?customer_id=1. Я не знаю, потому что это веб-приложение NetBeans / Maven.
Извините, я забыл важную часть JavaScript - оболочку «готовый документ» вокруг обработчика «submit», так что код для создания обработчика событий не запускается, пока страница не будет загружена. В противном случае он будет запущен в тот момент, когда тег скрипта будет добавлен на страницу (что, конечно, находится перед формой, потому что вещи добавляются в том порядке, в котором они появляются в документе HTML), и в это время форма не существует, поэтому не к чему привязывать событие. См. Правку, которая должна решить проблему.
Что это за проект? Asp.net или нет?