#javascript #jquery #ajax #node.js #single-page-application
#javascript #jquery #ajax #node.js #одностраничное приложение
Вопрос:
Я использую jquery ajax для отправки формы в мой node.js сервер. Я пытаюсь предотвратить обновление страницы (поскольку пытаюсь разработать SPA) с помощью функции preventDefault, но, к удивлению, она перенаправляется. И, более того, данные передаются на сервер node Express очень плавно. Но почему-то кажется, что он пропускает пару строк. Когда я пытаюсь это сделать в базовом POC, все работает нормально, и это предотвращает обновление страницы.
$(document).ready(function(){
$('#submit').click(function(event){
//$("form#foodForm").submit(function(event) {
window.alert( event.isDefaultPrevented() );
event.preventDefault();
window.alert( event.isDefaultPrevented() );
console.log("form submitted");
// Prevents the page from refreshing
var $this = $(this); // `this` refers to the current form element
$.post(
'/submittedData', // Gets the URL to sent the post to
$this.serialize(), // Serializes form data in standard format
function(data) {
console.log(data); /** code to handle response **/ },
"json" // The format the response should be in
);
});
});
app.js код:
app.post('/submittedData',function(req,res){
console.log('body: ' JSON.stringify(req.body));
});
Фрагмент HTML:
<form id="foodForm" action="/submittedData" method="post">
<ul> Main course
<li> <input type="checkbox" name="items[]" value="roti">Roti </li>
<li><input type="checkbox" name="items[]" value="biryani">Biryani</li>
<li><input type="checkbox" name="items[]" value="rice">Rice</li>
</ul>
<ul> On the side
<li><input type="checkbox" name="items[]" value="chicken">Chicken</li>
<li><input type="checkbox" name="items[]" value="mutton">Mutton</li>
</ul>
<button id="submit">Submit</button>
<!-- <input type="submit" value="submit" id="submit" > -->
</form>
Комментарии:
1. Возможно ли также отображать html-код? Возможно, идентификатор отправки еще не указан в dom при вызове события click. И если это так, возможно, используйте .on() поверх документа и привяжите событие click для отправки идентификатора.
2. Привет, также добавлен фрагмент HTML !! 🙂
3. Спасибо. Как насчет $(«#foodForm»).submit(функция(evt){evt.preventDefault();});
4. Также я вижу, что в html-кнопке отсутствует атрибут type =»кнопка». Вы можете сохранить код jQuery как есть и просто добавить атрибут, как упоминалось ранее, к вашему элементу button. Надеюсь, это поможет.
5. Привет, я последовал вашему второму комментарию, просто добавил атрибут type = «button», и странная вещь, которая произошла, заключается в том, что ничего не происходит, когда я нажимаю отправить, ни публикации, ни перезагрузки.. Похоже, что он мертв..
Ответ №1:
Добавить
return false;
в конце вашей функции в коде js .. это остановит обычный перезапуск страницы и отправку формы.
Попробуйте и скажите мне
Комментарии:
1. Здравствуйте, пробовал, но не работает. Единственное отличие, которое он делает, заключается в том, что он не перенаправляет на localhost: 3000 / submittedData, но остается на localhost: 3000 и пытается обновить страницу или что-то в этом роде. Но главное в том, что я не могу отправить запрос с этой же страницы. 🙁
Ответ №2:
Теперь проблема решена. И ответ ну .. сумасшедший. И все же я не смог выяснить основную причину. Я записывал js-код в отдельный файл и ссылался на него (должным образом), как мы обычно делаем. Но, хотя публикация происходила, страница перезагружалась.
Я скопировал и вставил js-код в саму html-страницу внутри тегов скрипта и бум!! это работает..
Комментарии:
1. Возможно, это просто кэш браузера, пробовал отключить это?
Ответ №3:
Вам следует использовать form.on("submit") событие, в вашем случае, даже если вы успешно отменили событие click button, если пользователь нажал кнопку enter при вводе в одно из полей ввода, ваш Ajax-код не будет работать, даже если вы успешно отменили событие click button, если пользователь нажал кнопку enter при вводе в одно из полей ввода