jQuery: захватить привязку href по щелчку и отправить асинхронно
Я почти никогда не играю с клиентскими вещами, и эта, по-видимому, простая задача пинает меня задом:)
У меня есть несколько ссылок. OnClick Я хочу предотвратить действие по умолчанию, перехватить его href url, отправить ajax GET на этот URL и просто alert()
с результатами... но я даже не могу пройти стартовую линию:)
Пример якоря для воспроизведения:
<a class="asynch_link" href="good/1.html">Click Here</a>
<a class="asynch_link" href="good/2.html">Click Here</a>
Теперь я поиграл с несколькими предложениями для подобных запросов на SO, но ссылки все еще заставляют браузер переходить к URL-адресу href.
Даже с просто
<script type="text/javascript">
$('a').click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
</script>
... ссылки все еще переходят на другую страницу.
Я чувствую себя как младенец здесь:)
Любая помощь будет высоко оценена.
И да, я в том числе jQuery:) <script src="//67.20.99.206/javascripts/jqueryCountdown/1-5-11/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
3 ответа
$('a').click(function(event) {
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
success: function(response) {
alert(response);
}
});
return false; // for good measure
});
Попробуй это
$('a').click(function (event)
{
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(data) {
alert(data);
});
});
Проблема здесь в том, что события не присоединяются к вашему элементу, потому что они не связаны в событии, готовом к DOM. Попробуйте включить ваши события в событие DOM ready, и если оно сработает, вы увидите предупреждение
<script>
$(function() {
$('a').click(function(event) {
event.preventDefault();
alert('fff')
//here you can also do all sort of things
});
});
</script>
После этого отправьте запрос Ajax и отправьте форму в функции обратного вызова Success.
<script>
$(function() {
$('a').click(function(event) {
event.preventDefault();
$.ajax({
url: 'url',
dataType :'json',
data : '{}',
success : function(data){
// Your Code here
$('#form').submit();
}
})
});
});
</script>