2013-11-08 3 views
-1

Как связать значения HTML href с AJAX, чтобы получить результат на той же странице, но в другом conatainer. Ниже мой мой код:Как использовать AJAX с HTML для нескольких значений href HTML

<html> 
<head> 
    <title>DTC Search</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"   type="text/javascript"></script> 
    <script> 
     $(document).ready(function() { 
      $('#a').click(function() { 
       e.preventDefault(); 
       $('content').load($(this).attr('href')); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <a href="" target="_blank">CT1<br></a> 
    <a href="" target="_blank">CT2<br></a>  
    <a href="" target="_blank">CT3<br></a> 
    <a href="" target="_blank">CT4<br></a> 
    <div id="sidebar"> Body</div> 
    <div id="footer"> &nbsp; </div> 
</body> 
</html> 

Поскольку я новичок в AJAX, я не могу понять, как получить информацию, связанную с щелкнули значением HREF в функции AJAX, так что он будет отображать результат на той же странице, но в другое разделение. Мое имя файла, скажем front_end.php

+0

Эээ ... как вы думаете, что '$ (это) .attr ('HREF')' бит все? – Quentin

+0

'$ ('# a')' недопустимо, потому что нет элемента с 'id =" a ". – geomagas

+0

Что должно быть там вместо * в функции ajax? – user2818537

ответ

1

Это не ваш код, просто обновление:

<html> 
<head> <title>DTC Search</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"   type="text/javascript"></script> 
    <script> 
    $(document).ready(function() { 
    $('a').each(function(){ 
     $(this).on("click",function(e) { 

     console.log(e); 
     e.preventDefault(); 
     $('#content').load($(this).attr('href')); 
     }); 
    }); 

    }); 
    </script> 

    <a href="front_end.php" target="_blank">CT1<br></a> 
<a href="front_end.php" target="_blank">CT2<br></a>  
<a href="front_end.php" target="_blank">CT3<br></a> 
<a href="front_end.php" target="_blank">CT4<br></a> 

    <div id="sidebar"> Body 
    </div> <div id="content"></div> 
<div id="footer"> &nbsp; </div> 
</body> 
</html> 

1) Тег не в JQuery $("#a")

2) $('content') ничего

3) с идентификатором $('#content') или некоторым элементом с классом $ ('# content')

Tako посмотреть на jsBin example

1: http://jsbin.com/IFaLoJE/1/ или jsfiddle example

+0

У вас может быть веская причина для этого, но я вижу, что '$ .each()' избыточно, когда все, что нужно, - '$ ('a'). On ('click', function() {})'. – Deryck

+0

Спасибо, но результат идет на другой странице, а не печатает на той же странице с кодом выше. – user2818537

+0

@ user2818537 код был немного неправильным, я обновил код и добавил два примера. – pregmatch

0

Попробуйте что-то вроде этого:

$('a').click(function (e) { 
    e.preventDefault(); 
    $('#content').load(this.href); 
}); 
Смежные вопросы