вариант использования ajax
Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
1. Предварительное понимание
Здесь вы можете изменить скорость и медленность сети. Сетевое ограничение, потокоориентированное моделирование.
network->allПредставляет все загруженные события
Тот, что сзади, показывает /, это первый маршрут. Сзади есть много файлов SVG и JS.
Мне нужен адрес этого сервера,использоватьnetwork->XHR Это XMLHttpRequest. 。
Ajax инкапсулирует этот объект XHR. Вы можете увидеть этот объект здесь
В объекте много данных, поэтому нет необходимости смотреть на этот метод нативного js
Интерфейс Xiao**: интерфейс, который он вызывает, представляет собой баннер.
Нажмите на баннер, чтобы увидеть интерфейс сервера, метод запроса, код состояния, удаленный IP-адрес и т. д.
Вот заголовки ответов и заголовки запросов:
Здесь вы можете изменить устройство запроса:
При нажатии вызывается множество интерфейсов, и каждый интерфейс соответствует большому количеству данных.
Мы отправили запрос, а затем посмотрели ответ. Нам нужно визуализировать данные ответа. Данные ответа — это ответ, а предварительный просмотр — это предварительно обработанное представление.
Добавьте обложку на https: для доступа и просмотра этого ресурса
Это изображение:
2. Практическая демонстрация принципов
Добавить функцию обратного вызова
$(function () {
})Получите данные домашней страницы и отправьте запрос ajax. URL-адрес запроса, метод запроса, функция обратного вызова после успеха.
$(function () {
$.ajax({})
})Затем введите адрес моего запроса:
Разделите эти два запятой
$(function () {
$.ajax({
url:'https://api.apeland.cn/api/banner/',
methods:'get',
success:function () {
},
error:function () {
}
})
})Посмотрите еще раз на следующий код:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:'https://api.apeland.cn/api/banner/',
methods:'get',
success:function (res) {
console.log(res);
},
error:function (err) {
console.log(err);
}
})
})
</script>
</body>
</html>Распечатка данных, на которые сервер отвечает после нашего запроса, является объектом.
Затем мы можем проанализировать данные, возвращаемые сервером. Если код равен 0, мы можем что-то сделать с данными в data.
Это массив, один элемент. Возьмите этот элемент массива напрямую.
Теперь, чтобы получить покрытие в массиве:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:'https://api.apeland.cn/api/banner/',
methods:'get',
success:function (res) {
if(res.code===0){
var cover=res.data[0].cover;
console.log(cover);
};
},
error:function (err) {
console.log(err);
}
})
})
</script>
</body>
</html>View Code
success:function (res) { if(res.code===0){ var cover=res.data[0].cover; console.log(cover); }; },
Затем мне нужно создать img, чтобы вставить это изображение на мою страницу.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:'https://api.apeland.cn/api/banner/',
methods:'get',
success:function (res) {
if(res.code===0){
var cover=res.data[0].cover;
console.log(cover);
$('#box').append(`<img src=${cover} alt=${name}>`)
};
},
error:function (err) {
console.log(err);
}
})
})
</script>
</body>
</html>View Code
success:function (res) { if(res.code===0){ var cover=res.data[0].cover; var name=res.data[0].name; console.log(cover);
$('#box').append(`<img src=${cover} alt=${name}>`) //Добавляем элементы. Используйте обратные кавычки при добавлении тегов. Используйте данные, возвращаемые сервером в теге. Используйте ${} для получения переменных. ${} не нужно заключать в кавычки.
}; },Это выходит так:
Когда я нажимаю Python, здесь отображается содержимое Python.
Когда я нажимаю на облачные вычисления, здесь отображается содержимое облачных вычислений. Другой маршрут меняет страницу по-другому.
Другой пример: посмотрите следующую веб-страницу Луффи:
Этот URL-адрес также называется интерфейсом:
Когда я нажимаю на бесплатные занятия, я вижу бесплатные занятия. URL-адрес соответствует разным интерфейсам, разные интерфейсы возвращают разные данные, а разные данные соответствуют разным страницам. Это называется представлением, управляемым данными. Данные изменяются, интерфейс обрабатывает их, а затем меняется страница.
Нажмите Qingke еще раз, URL-адрес снова изменился, и страница тоже изменилась.
Меняется URL, меняется интерфейс, меняются и данные.
Данные в столбце выше и ниже совпадают:
Нажмите «Эксплуатация и обслуживание», чтобы получить данные подкатегории 0 и 2, 0 — все данные, а 2 — данные интерфейса эксплуатации и обслуживания.
Атрибуты в free_sections соответствуют отображаемым на странице:
Данные, полученные средствами разработки, следующие:
Эффект отображения страницы следующий:
Первая часть данных расширяется следующим образом;
Дважды щелкните здесь, чтобы перейти на страницу всех данных в инструментах разработки:
Вы можете использовать инструмент json для установки формата.
Вот два одновременных запроса:
3. Фактическая реализация кода Ajax
В обоих местах должен быть div, а под ним должен быть ul.
Код: вам нужно использовать ajax, чтобы получить данные интерфейса и поместить их в мастер.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
})
</script>
</body>
</html>View Code
Теперь нам нужно получить эти интерфейсы, а затем получить данные по интерфейсам:
Теперь осмотрите элемент,Обнови это,network->xhr->есть одинlist
Нажмите, чтобы просмотреть данные текущей страницы. Python соответствует данным id1, а работа и обслуживание соответствуют данным id2. скрыть:false означает, что этот элемент не скрыт и не отображается.
Также здесь имеется переписка при посещении следующих страниц:
Затем скопируйте интерфейс этих данных из заголовков
Поместите интерфейс в атрибут URL ajax.
Доступ к данным интерфейса также можно получить напрямую, используя эту ссылку на интерфейс, не заглядывая в инструмент разработки.
У Google есть плагин форматирования, и вы также можете использовать онлайн-форматирование для облегчения чтения;
Скопируйте его и отформатируйте: это файл json.
Затем вы можете скопировать его, чтобы просмотреть при вызове:
Поместите интерфейс 2 в 1 в URL-адрес ajax и вызовите его. В ajax этот интерфейс будет запрошен, а данные в 4 будут возвращены в функции обратного вызова успеха и присвоены существующей переменной res. Позже нам нужно будет работать с данными, возвращаемыми нам сервером, поэтому мы возьмем данные из 4 и поместим их в виде переменных в html-тег, созданный ajax. Таким образом, когда внешний интерфейс обращается к этой странице, он будет использовать данные, полученные из серверной части, для визуализации веб-страницы. Внутренний программист отвечает за предоставление этих интерфейсов интерфейсным программистам, чтобы они могли вызывать эти данные для визуализации интерфейсной веб-страницы.
Мы видим, что данные, возвращаемые в точке 4, являются данными базы данных. Каждый {} содержит строку (часть) данных, и каждая строка данных имеет соответствующие поля.
Таблица 1 и таблица 2 связаны между собой. Щелкните строку данных в таблице 1 Python. 2 показаны данные таблицы, связанной с Python (насколько я понимаю, каждые данные тега li в 1 соответствуют таблице; также может быть так, что все теги li соответствуют 1 таблице в 2, но эта таблица имеет 1. Идентификатор каждого часть данных вводится в эту таблицу как внешний ключ. Каждый раз, когда вы нажимаете на фрагмент данных в таблице 1, содержимое таблицы 2, соответствующее идентификатору данных в позиции 2, запрашивается на серверной стороне и отображается в ul ниже с использованием ajax и других языков для создания тегов li и. замените их переменными для создания тегов в том же формате). Для каждого фрагмента данных в точке 1 точка 2 постоянно переключается. Это связь между таблицами. Многие операции необходимо выполнять в фоновом режиме. Вы можете использовать модуль pymysql Python для чтения внутренних данных.
Напишите код ниже, чтобы получить данные интерфейса:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// {
// "error_no": 0,
// "data": [{
// "id": 1,
// "name": "Python",
// "hide": false,
// "category": 1
// }, {
// "id": 2,
// "name": "LinuxЭксплуатация и обслуживание",
// "hide": false,
// "category": 4
// }, {
// "id": 4,
// "name": «Питон Продвинутый»,
// "hide": false,
// "category": 1
// }, {
// "id": 7,
// "name": «инструменты разработки»,
// "hide": false,
// "category": 1
// }, {
// "id": 9,
// "name": «Иди языком»,
// "hide": false,
// "category": 1
// }, {
// "id": 10,
// "name": «машинное обучение»,
// "hide": false,
// "category": 3
// }, {
// "id": 11,
// "name": «Техническая карьера»,
// "hide": false,
// "category": 1
// }]
// }
$(function () {
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
console.log(res);
},
error:function f1(err) {
console.log(err);
}
})
})
</script>
</body>
</html>View Code
$(function () { $.ajax({ url:'https://www.luffycity.com/api/v1/course_sub/category/list/', methods:'get', success:function(res){ console.log(res); }, error:function f1(err) { console.log(err); } }) })$(function{
$.ajax({})
})
Помните снаружи(функция {}) предназначена для выполнения внутреннего кода только после загрузки документа, чтобы предотвратить загрузку документа и js для работы с незагруженными тегами. Запрос на реализацию ajax помещается в.ajax({})внутри。ajaxдаjQueryметод,Вам необходимо импортировать файл библиотеки jQuery. Я просто сделал ошибку,не размещен
Ниже приведен объект данных этого API, полученный после выполнения кода.
В объекте возвращается код ошибки, содержимое данных представляет собой массив (метод foreach можно использовать для зацикливания содержимого массива) и метод объекта.
Полученный контент данных — это контент данных, предоставляемый этим интерфейсом:
Каждая часть содержимого данных является содержимым данных интерфейса, к которому осуществляется доступ.
Затем получите данные в объекте res,
$(function () {
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
console.log(res.data);
},
error:function f1(err) {
console.log(err);
}
})
})Это массив. Если вы хотите просмотреть каждый элемент, вы можете использовать метод массива.
Объект массива.forEach(функция (item,index) {
} //item — это каждый объект, index — это индекс каждого объекта
Когда я нажимаю на инструмент разработчика, как он узнает, нужно ли отображать содержимое в инструменте? Ему нужно знать, на какие данные идентификатора вы нажимаете, а затем выполняет запрос между двумя таблицами на основе идентификатора таблицы данных в инструмент разработчика. Поэтому при вставке тегов li, таких как инструменты разработчика, идентификационный номер в данных, возвращаемых этим API, должен быть записан как атрибут li инструментов разработчика. Когда происходит событие щелчка, содержимое таблицы данных с тем же идентификатором внешнего ключа в другой таблице отображается на основе полученного значения атрибута id.
Следовательно, идентификатор каждого фрагмента данных со значением 1 необходимо поместить в сгенерированный атрибут тега li. Отображаемый контент можно увидеть по данным, возвращаемым интерфейсом в виде имени.
Сгенерируйте каждый фрагмент данных, который будет добавлен к указанному тегу в HTML-шаблоне для отображения. Следующий сводный код выглядит следующим образом:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// {
// "error_no": 0,
// "data": [{
// "id": 1,
// "name": "Python",
// "hide": false,
// "category": 1
// }, {
// "id": 2,
// "name": "LinuxЭксплуатация и обслуживание",
// "hide": false,
// "category": 4
// }, {
// "id": 4,
// "name": «Питон Продвинутый»,
// "hide": false,
// "category": 1
// }, {
// "id": 7,
// "name": «инструменты разработки»,
// "hide": false,
// "category": 1
// }, {
// "id": 9,
// "name": «Иди языком»,
// "hide": false,
// "category": 1
// }, {
// "id": 10,
// "name": «машинное обучение»,
// "hide": false,
// "category": 3
// }, {
// "id": 11,
// "name": «Техническая карьера»,
// "hide": false,
// "category": 1
// }]
// }
$(function () {
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
console.log(res);
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li id=${item.id}>${item.name}</li>`).appendTo('#box ul')
})
}
},
error:function f1(err) {
// console.log(err);
}
})
})
</script>
</body>
</html>View Code
$(function () { $.ajax({ url:'https://www.luffycity.com/api/v1/course_sub/category/list/', methods:'get', success:function(res){ console.log(res); if(res.error_no===0){ res.data.forEach(function (item,index) { $(`<li id=${item.id}>${item.name}</li>`).appendTo('#box ul') }) } }, error:function f1(err) { // console.log(err); } }) })Здесь используется следующий метод:
(`<li id=
Child.appendTo(parent); Дочерний объект — это объект jq, который представляет собой сгенерированный тег li и заключен в обратные кавычки; полученные фоновые данные — это каждое поле данных; переменная данных — ${backend datavariable}; — селектор, заключенный в кавычки.
Все данные — это данные, возвращаемые res, и получаемые с помощью res.data; объект получает в нем значения атрибутов. Поскольку это не метод, нет необходимости добавлять () напрямую. Атрибуты объекта, атрибуты могут быть многими типами данных, а не только числовыми строками, это также может быть массив, объект и т. д.;
Здесь data — это массив, res.data — это массив, и каждый элемент цикла массива может быть array.forEach(). Метод forEach — это анонимная функция forEach(function(item,index){}). Анонимная функция имеет два параметра: item — это каждый элемент массива, а index — это индекс этого элемента. В функции пишется код. работать с одним элементом массива - все элементы массива выполняют одну и ту же операцию; здесь нужно добавить тег li к каждому элементу и добавить его в ul под полем с идентификатором, отобразить все имена в возвращаемых данных. и запишите, какая это часть данных (отличается идентификатором).
Каждый полученный фрагмент данных является элементом, а каждый элемент — объектом. Значением, полученным в этом фрагменте данных, является объект данных.свойство. Вот item.name
Когда я нажимаю на Python, появляется подкатегория 1, а когда я нажимаю на «Эксплуатация и обслуживание», появляется подкатегория 2. Поля, полученные по клику на главной странице в правом нижнем углу, используются для склейки. Неизвестно, почему они несогласованы. Кажется, что категория является родительской, а при соединении sub_category является значением дочернего элемента.
Это используется для сращивания. Категория поля, полученная в фоновом режиме, является значением, используемым для сращивания.
Назначение значения атрибута id также можно установить, используя только attr. //Вопрос: Можно ли использовать атрибут attr подряд? В одной строке кода можно установить несколько атрибутов?
Обратите внимание здесь,Обязательно внутри обратных кавычекСсылка на {variable} внешне кажется ненужной, но здесь она добавляется извне.{}Сообщить о проблемах с синтаксисом。Эта переменная не добавляется за пределы обратных кавычек.{} верно. //сомневаться,Кавычатся ли {} переменные только в обратных кавычках?
Также можно использовать attr для добавления атрибутов позже.
См. ниже:
То, что здесь получено, не имеет целого, затем используйте ajax, чтобы напрямую добавить данные объекта в полученный массив, при этом идентификатор равен 0, а имя — all. Поскольку я использовал только переменные id и name для созданного здесь тега li, поэтому мне нужны только эти две переменные.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// {
// "error_no": 0,
// "data": [{
// "id": 1,
// "name": "Python",
// "hide": false,
// "category": 1
// }, {
// "id": 2,
// "name": "LinuxЭксплуатация и обслуживание",
// "hide": false,
// "category": 4
// }, {
// "id": 4,
// "name": «Питон Продвинутый»,
// "hide": false,
// "category": 1
// }, {
// "id": 7,
// "name": «инструменты разработки»,
// "hide": false,
// "category": 1
// }, {
// "id": 9,
// "name": «Иди языком»,
// "hide": false,
// "category": 1
// }, {
// "id": 10,
// "name": «машинное обучение»,
// "hide": false,
// "category": 3
// }, {
// "id": 11,
// "name": «Техническая карьера»,
// "hide": false,
// "category": 1
// }]
// }
$(function () {
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:0,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
// console.log(err);
}
})
})
</script>
</body>
</html>View Code
res.data.unshift({ id:0, имя: 'все' })
Это 0?
Теперь, когда данные в точке 1 получены и отображены, необходимо получить и отобразить данные в точке 2. В этом случае вы можете написать еще один запрос ajax. API-интерфейсы 1 и 2 разные.
Получите данные в точке 2 и напишите второй запрос ajax. 4 ниже этого API,
Все запрошенные данные:
0 в sub_category=0 в API необходимо соединить. Затем определите sub_category в глобальной переменной и присвойте ей значение по умолчанию 0, что означает, что будет отображаться все следующее. Затем назначьте глобальную sub_category всем идентификаторам. Это отобразит весь следующий контент.
Затем используйте объединенный URL-адрес для второго API-запроса ajax. Поскольку для объединения используются переменные, «» становится обратным кавычком.
Здесь sub_category равна 0. Получите весь контент.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// {
// "error_no": 0,
// "data": [{
// "id": 1,
// "name": "Python",
// "hide": false,
// "category": 1
// }, {
// "id": 2,
// "name": "LinuxЭксплуатация и обслуживание",
// "hide": false,
// "category": 4
// }, {
// "id": 4,
// "name": «Питон Продвинутый»,
// "hide": false,
// "category": 1
// }, {
// "id": 7,
// "name": «инструменты разработки»,
// "hide": false,
// "category": 1
// }, {
// "id": 9,
// "name": «Иди языком»,
// "hide": false,
// "category": 1
// }, {
// "id": 10,
// "name": «машинное обучение»,
// "hide": false,
// "category": 3
// }, {
// "id": 11,
// "name": «Техническая карьера»,
// "hide": false,
// "category": 1
// }]
// }
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
// console.log(err);
}
})
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
}
})
})
</script>
</body>
</html>View Code
Все 21 фрагмент данных — это данные ниже.
Итак, теперь нажмите Python, Python будет отображаться ниже, а эксплуатация и обслуживание будут отображаться под эксплуатацией и обслуживанием. Поскольку его необходимо отобразить, ниже находится div, а внутри div есть ul. Под ul есть li, в которых хранится несколько материалов, связанных с Python или эксплуатацией и обслуживанием.
Теперь возьмите заголовок в качестве примера, просто напишите этот заголовок
Просто посмотрите на первый фрагмент данных: 1 в красном поле — это запись в таблице. Эта таблица связана с другой таблицей 2. Видно, что
Красное поле ниже представляет собой еще одну связанную таблицу:
Еще одна связанная таблица показана здесь:
Обратите внимание, что в данных, возвращаемых res, есть атрибуты данных и методы данных. Когда мы используем данные, мы используем атрибут данных Res.data, который напрямую представляет данные без скобок. Здесь res.data представляет собой массив. Чтобы зациклить элементы массива, res.data.forEach(function(item,index){})
Затем нам нужно сгенерировать дочерний элемент и добавить его к родительскому; дочерний тег генерирует дочерний тег, а дочерний тег должен использовать обратные кавычки. Чтобы использовать переменную в дочернем элементе, используйте два слоя. дочерние элементы могут быть вставлены в дочерний элемент; родительский элемент просто записывает селектор. Никакие объекты не записываются; каждый элемент массива использует переменную, и каждый объект элемента массива является элементом.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<div class="content">
<ul>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
}
})
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
})
}
}
})
})
</script>
</body>
</html>View Code
$.ajax({ url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`, methods:'get', success:function (res) { console.log(res); if(res.error_no===0){ res.data.forEach(function (item,index) { $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul') }) } } })результат:
Примечание. Это если (res. error_no===0), не всегда записывайте его как код ошибки.
Теперь отображается все. Я хочу нажать «Python», будет отображаться только «Python», а остальные будут исключены; нажмите «Операция и обслуживание», будут отображаться только «Операция и обслуживание», а остальные будут исключены. бэкэнд-фильтр. Затем вам нужно привязать событие клика к каждому тегу li здесь.
$('#box ul li').click(function () {
})Событие щелчка меняет значение sub_category=${sub_category} каждый раз, когда оно выполняется.
Чтобы записать событие щелчка, вы получаете идентификатор объекта, по которому щелкнули, в области функции, а затем присваиваете идентификатор переменной sub_category, чтобы запрошенный URL-адрес изменился. Но в этом случае предыдущий код позже придется писать заново.
Затем напишите предыдущий код как функцию и вызовите ее. Затем в последующем событии щелчка сначала измените sub_category на значение атрибута id выбранной метки, а затем вызовите функцию, чтобы выполнить те же действия для отображения данных.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<div class="content">
<ul>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
}
})
getCourseList(sub_category )
function getCourseList(sub_category){
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
})
}
}
})
}
$('#box ul li').click(function () {
sub_category=$(this).attr('id')
getCourseList(sub_category)
})
})
</script>
</body>
</html>View Code
getCourseList(sub_category ) function getCourseList(sub_category){ $.ajax({ url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`, methods:'get', success:function (res) { console.log(res); if(res.error_no===0){ res.data.forEach(function (item,index) { $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul') }) } } }) } $('#box ul li').click(function () { sub_category=$(this).attr('id') getCourseList(sub_category) }) })Но это не подействовало. После нажатия на Python следующие данные по-прежнему не изменились. Поскольку тег li не был создан с использованием данных из серверной части, было создано следующее событие щелчка. Так что это эквивалентно тому, чтобы не быть связанным. То, что вы не можете сделать сами, оставьте это другим, ивент-делегированию, ивент-агентству. События распространяются. Если щелкнуть тег li, он распространится на родительский набор, а также может распространиться на родительский набор и т. д. В этом случае событие не будет привязано к li. Привяжите событие к родительскому ul.
Он был добавлен после нажатия и добавляется на исходной основе, поэтому вам нужно сначала его очистить, а затем создать тег li.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<div class="content">
<ul>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
}
})
getCourseList(sub_category )
function getCourseList(sub_category){
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
})
}
}
})
}
$('#box ul ').on('click','li',function () {
var sub_category=$(this).attr('id')
console.log(sub_category);
getCourseList(sub_category)
})
})
</script>
</body>
</html>View Code
$('#box ul ').on('click','li',function () { sub_category=$(this).attr('id') console.log(sub_category); getCourseList(sub_category) })То, что выше, неверно. $(parent selector).on('event', 'label', анонимная функция) //Неправильный выбор — li вместо ul label.
Код выглядит следующим образом;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<div class="content">
<ul>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
}
})
getCourseList(sub_category )
function getCourseList(sub_category){
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
if(res.error_no===0){
$('.content ul').empty()
res.data.forEach(function (item,index) {
$(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
})
}
}
})
}
$('#box ul ').on('click','li',function () {
sub_category=$(this).attr('id')
console.log(sub_category);
getCourseList(sub_category)
})
})
</script>
</body>
</html>View Code
getCourseList(sub_category ) function getCourseList(sub_category){ $.ajax({ url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`, methods:'get', success:function (res) { console.log(res); if(res.error_no===0){ $('.content ul').empty() res.data.forEach(function (item,index) { $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul') }) } } }) } $('#box ul ').on('click','li',function () { sub_category=$(this).attr('id') console.log(sub_category); getCourseList(sub_category) })
Это ajax, это работа фронтенд-инженеров. Большинство из них пишут страницы, обеспечивают совместимость и создают мобильные терминалы и ПК-терминалы. Еще один аспект — взаимодействие. После того, как серверная часть записывает интерфейс, такой как адресная строка, внешний интерфейс использует ajax для запроса вашего интерфейса, а затем выполняет операции dom.
Операции DOM — это операции над атрибутами, значениями, классами и т. д.
Например, здесь, если после щелчка меняет цвет только этот, вам нужно использовать одноуровневый селектор, что является эксклюзивным подходом.
Чтобы разделить переднюю и внутреннюю часть, вы должны написать ajax. Передняя часть предназначена для написания ajax, а задняя часть предназначена для написания интерфейсов. Каркас джонге не отделен от переднего и заднего торцов. Это интерфейс, написанный на серверной части и отображаемый непосредственно сервером.
4. Окончательный код:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дьявол побеждает бурю</title>
</head>
<body>
<div id="box">
<ul>
<!--волшебник-->
</ul>
</div>
<div class="content">
<ul>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var sub_category=0
$.ajax({
url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
methods:'get',
success:function(res){
res.data.unshift({
id:sub_category,
имя: 'все'
})
if(res.error_no===0){
res.data.forEach(function (item,index) {
$(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
})
}
},
error:function f1(err) {
}
})
getCourseList(sub_category )
function getCourseList(sub_category){
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
methods:'get',
success:function (res) {
console.log(res);
if(res.error_no===0){
$('.content ul').empty()
res.data.forEach(function (item,index) {
$(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
})
}
}
})
}
$('#box ul ').on('click','li',function () {
sub_category=$(this).attr('id')
getCourseList(sub_category)
})
})
</script>
</body>
</html>View Code
Издатель: Full stack программист и руководитель стека. Пожалуйста, укажите источник для перепечатки: https://javaforall.cn/155335.html Исходная ссылка: https://javaforall.cn.
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
Код js веб-страницы, фон частицы, код спецэффектов
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
Серия uni-app: uni.navigateЧтобы передать скачок значения
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
JS-время конвертации
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
Поле комментария, щелчок мышью, специальные эффекты, js-код
Объект массива перемещения объекта JS
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
Получить текущее время в js_Как динамически отображать дату и время в js
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
Copilot облачной разработки — упрощение разработки
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
vLLM: мощный инструмент для ускорения вывода ИИ
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
LM Studio для создания локальных больших моделей
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
