JQuery Ajax, можно ли использовать идентификатор из тега как переменную в ajax-call? - PullRequest
Новая
       2

JQuery Ajax, можно ли использовать идентификатор из тега как переменную в ajax-call?

0 голосов
/ 29 ноября 2018

У меня есть динамически генерируемая веб-страница, на которой я хотел бы использовать Ajax-вызовы для вставки дополнительных данных по запросу (клики) пользователем.

В приведенном ниже примере кода я пытаюсь показать, что мне нужно.Когда пользователь нажимает на линии Джона или Анны, должен быть сделан Ajax-вызов, возвращающий правильный город.Я хотел бы использовать атрибут "id" в качестве параметра в вызове, но я не понимаю, как я могу получить правильный атрибут ... 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".clickable").click(function(){
        $("#city").load("get_city_for.php?name=[the_name_from_id_in_the_clicked_div] ");
    });
});
</script>
</head>
<body>

<div class="clickable" id="John">Click here to show where John lives<div>
<div class="clickable" id="Anne">Click here to show where Anne lives<div>

<div id="city">(click above to show the city here)</div>

</body>
</html>

Поэтому, когда пользователь нажимает на строку Джонакод Jquery должен вызывать «get_city_for.php? name = John», поскольку атрибут id строки Джона - «John».

Ответы [ 4 ]

0 голосов
/ 29 ноября 2018

ES6: 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        const $document = $(document);

        $document.ready(function() {
            $document.find('.clickable').on('click', (e) => {
                const urlRequest = `get_city_for.php?name=${e.target.id}`;

                $document.find('#city').load(urlRequest);

                console.log(urlRequest);
            });
        });

    </script>
</head>
<body>

<div class="clickable" id="John">Click here to show where John lives<div>
<div class="clickable" id="Anne">Click here to show where Anne lives<div>

<div id="city">(click above to show the city here)</div>

</body>
</html>
0 голосов
/ 29 ноября 2018

В .click(), this будет элементом, на который вы нажали, поэтому вы можете использовать $(this).attr("id"), чтобы получить идентификатор элемента, по которому щелкнули..attr("someatribute") возвращает значение атрибута элемента. 

$(document).ready(function(){
    $(".clickable").click(function(){
        $("#city").load("get_city_for.php?name=" + $(this).attr("id"));
    });
});
0 голосов
/ 29 ноября 2018 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".clickable").click(function(){
    console.log(this.id);
         $("#city").load("get_city_for.php?.php?name="+this.id);
    });
});
</script>
</head>
<body>

<div class="clickable" id="John">Click here to show where John lives<div>
<div class="clickable" id="Anne">Click here to show where Anne lives<div>

<div id="city">(click above to show the city here)</div>

</body>
</html>
0 голосов
/ 29 ноября 2018 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".clickable").click(function(){
    console.log($(this).attr("id"));
        $("#city").load("get_city_for.php?.php?name="+$(this).attr("id"));
    });
});
</script>
</head>
<body>

<div class="clickable" id="John">Click here to show where John lives<div>
<div class="clickable" id="Anne">Click here to show where Anne lives<div>

<div id="city">(click above to show the city here)</div>

</body>
</html>

Использование $(this).attr("id").Функция attr используется для доступа к атрибутам из элементов DOM.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...