Он не работает, используя 'a', чтобы отправить форму в HTML

Question

Я попытался отправить запрос методом 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() я проверил, и атрибут действия формы - это правильный 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-адреса, но не работает для меня.

Answer 1

Если у вас есть ссылка на пустой атрибут 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(); 
    }); 
}); 

Answer 2

Try;

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

Answer 3

Используйте <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, чтобы повысить комфортность навигации по сайту.