Я попытался отправить запрос методом post, щелкнув элемент a в HTML. Но он всегда обновляет текущую страницу, даже action обновляется с правильным значением.

Вот так я и отправляю запрос.

$(function() {
    $('.detail a').click(function() {
        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});

Я передал значения скрытым элементам для отправки методом POST. Перед submit() я проверил, и атрибут action формы - это правильный URL, который я хочу. Но после этого он не перенаправлял на заданный мной URL, а просто обновлял текущую страницу.

Это a в моем коде:

<a href data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>"

Вот как выглядит form:

<form id="cityForm" method="post" action="<%=basePath%><c:out value='${sp}'/>">

Это работает в IE. Я искал в Интернете и нашел несколько решений, в которых говорится, что это вызвано тем, что Chrome воспринимает его как тот же запрос, поэтому мне нужно добавить метку времени после URL, но у меня это не сработало.

1
Sky 18 Дек 2015 в 09:50

3 ответа

Лучший ответ

Если у вас есть ссылка с пустым атрибутом href, она станет URL-адресом текущей страницы, поэтому при нажатии на эту ссылку страница просто обновляется. Если вы хотите привязать какое-либо действие к элементу a, вы должны запретить его поведение по умолчанию, используя event.preventDefault():

$(function() {
    $('.detail a').click(function(event) {
        event.preventDefault();

        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});
4
Michał Perłakowski 18 Дек 2015 в 07:04

Используйте <input type="submit"> или <button type="submit"> вместо ссылки. Вы можете использовать CSS для стилизации input точно так же, как тег a, и он все равно будет работать, когда JavaScript отключен в браузере, что невозможно в вашем текущем решении.

button[type=submit].link {
  display: inline;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
button[type=submit].link:hover {
  text-decoration: underline;
  color: blue;
}
<button type="submit" class="link">This is a submit button</button>

Вы должны всегда создавать веб-сайты, чтобы они были полностью функциональными без JavaScript, тогда вы можете добавить JS, чтобы повысить удобство навигации по сайту.

2
Gerald Schneider 18 Дек 2015 в 07:09

Пытаться;

<a href="" data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>" >Submit Form</a>
1
blasteralfred Ψ 19 Янв 2016 в 18:29