Как кодировать одну функцию jquery для всех ссылок AJAX - PullRequest
Новая
       1

Как кодировать одну функцию jquery для всех ссылок AJAX

4 голосов
/ 17 июля 2010

Я использую Zend Framework на Windows.Я хочу реализовать Ajax в моем проекте в первый раз.Я искал помощи и создал очень простую функциональность ajax.

IndexController.php 

public function indexAction() {
}

public function oneAction() {
}

public function twoAction() {
}

index.phtml 

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/AJAX.js"></script>

<a href='http://practice.dev/index/one' class='one'>One</a>
<a href='http://practice.dev/index/two' class='two'>Two</a>
<br /><br />
<div id="one">one.phtml content comes here</div>
<div id="two">two.phtml content comes here</div>

AJAX.js 

jQuery(document).ready(function(){
    jQuery('.one').click(loadOne);
    jQuery('.two').click(loadTwo);
});

function loadOne(event) {

    event.preventDefault();

    jQuery.ajax({
        url: '/index/one',
        success: function( data ) {
                    jQuery('#one').html(data);
                    }
    });
}

function loadTwo(event) {

    event.preventDefault();

    jQuery.ajax({
        url: '/index/two',
        success: function( data ){
                    jQuery('#two').html(data);
                    }
    });
}

Над кодом работает и загружает данные one.phtml и two.phtml в «one» и «two» DIVs соответственно, когда его ссылканажата.Вы можете видеть, что мне нужно создать отдельную функцию jquery для каждой ссылки, а также добавить новый класс для каждого тега ссылки.

Что я хочу сделать? :

Я хочу использовать только одну функцию jquery для всех запросов AJAX и не хочу жестко кодировать url и success атрибутов в этой функции.

Когда я добавляюКласс "AJAX" для любого тега ссылки, тогда он должен загружать контент, используя AJAX.

Спасибо.

Ответы [ 4 ]

8 голосов
/ 17 июля 2010

для простой загрузки данных в div я бы использовал метод загрузки

HTML 

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/AJAX.js"></script>

<a href='http://practice.dev/index/one' class='ajax' rel="one">One</a>
<a href='http://practice.dev/index/two' class='ajax' rel="two">Two</a>
<br /><br />
<div id="one">one.phtml content comes here</div>
<div id="two">two.phtml content comes here</div>

JS 

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event){
       event.preventDefault();

       var target = '#' + jQuery(this).attr('rel');
       var href = jQuery(this).attr('href');
       jQuery( target ).load( href );

      });
});

Используйте один класс для определения всех ссылок, которые должны использовать вызовы ajax вместо их обычного использования.И добавьте атрибут rel к тем ссылкам, которые будут содержать id контейнера div.

1 голос
/ 24 ноября 2015

Просто и красиво.Нет Jquery требуется.Проверьте это: Bjax

Использование: 

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

Наконец, включите это в заголовок вашего HTML: 

$('a').bjax();

Для болеенастройки, ознакомьтесь с демо здесь: Bjax Demo

0 голосов
/ 17 июля 2010

Компактная версия: 

$(function(){
    $('.one').click(loadOne);
    $('.two').click(loadTwo);
});

function loadOne(event) {
    event.preventDefault();
    $('#one').<a href="http://api.jquery.com/load/" rel="nofollow noreferrer">load('/index/one')</a>;
}

function loadTwo(event) {
    event.preventDefault();
    $('#two').<a href="http://api.jquery.com/load/" rel="nofollow noreferrer">load('/index/two')</a>;
}
0 голосов
/ 17 июля 2010

Может быть, это: 

function loadData(url, callback) {
    jQuery.ajax({url: url, success: callback});
}

loadData('/index/one', function( data ) {
    jQuery('#one').html(data);
})

loadData('/index/two', function( data ) {
    jQuery('#two').html(data);
})

Чтобы сделать это еще более компактным, вы можете определить один и тот же обратный вызов для обоих, а затем обработчик должен решить, в какой элемент должны быть записаны данные ответа.

...