HTML Ajax jQuery

@beha96 · Регистрация: 27.03.2016

Студворк — интернет-сервис помощи студентам

Как с помощью ajax добавить информацию именно из txt файла на страницу?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <script type="text/javascript" scr="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Документ без названия</title>
</head>
<body>
<h1>Какая-то информация</h1>
Тут должна быть ссылка (именно ссылка, а не button) кликая по которому информация из txt файла должна отображаться в id="qq"
<p id="qq"></p>
</body>
</html>

@kloks · 30.04.2016, 17:00

HTML5
1
2
<a href="#" id="my_link">Нажми на меня</a><br/>
<p id="qq"></p>

JavaScript
1
2
3
4
5
6
7
8
9
10
$('#my_link').click(function (e) {
    e.preventDefault(); // Отменяем действие по умолчанию
    
    $.ajax({
        url: 'filename.txt', // Путь к txt файлу
        success: function (data) {
            $('#qq').html(data);
        }
    });
});

И Jquery поновее подключайте

HTML5
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

@beha96 · 30.04.2016, 17:26 **[ТС]**

kloks,
на этой строке $("#my_link").click(function(e) {

такая ошибка:
$ is not defined

@kloks · 30.04.2016, 17:36

beha96, подключайте Jquery по этой ссылке

JavaScript
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

@beha96 · 30.04.2016, 18:07 **[ТС]**

kloks
Вообще ничё не происходит

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
    <script type="text/javascript" scr="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Документ без названия</title>
    $('#my_link').click(function (e) {
    e.preventDefault();    
    $.ajax({
        url: 'filename.txt',
        success: function (data) {
            $('#qq').html(data);
        }
    });
});
</head>
<body>
<h1>Какая-то информация</h1>
<a href="#" id="my_link">Ссылка</a>
<p id="qq"></p>
</body>
</html>

И ещё, в txt файле достаточно того чтобы было тупо текст или что-то там надо добавить?

@whiteapps · 01.05.2016, 23:47

beha96, вы пробуете локально, или загрузили все ваши файлы куда-то на сервер?

@dzendev · 02.05.2016, 15:55

Сообщение от beha96

Вообще ничё не происходит

Ну для начала надо наверно добавить код в тег script...

@beha96 · 04.05.2016, 15:19 **[ТС]**

dzendev
Ну в коде то он на скрипте

это я здесь вручную добавил эту часть и забыл про тег <script>
whiteapps
пока что просто для проверки локально (с диска)

@whiteapps · 04.05.2016, 16:28

beha96, локально с веб сервером или просто открываете html файл?
без веб сервера ajax запрос не отправится

@Padonak · 06.05.2016, 19:22

... и без $(document).ready(); тоже. ТС, вы знаете, что такое Консоль?

@beha96 · 23.05.2016, 17:19 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Документ без названия</title>
</script>
</head>
<body>
 
     <div id="menu">
         <ul class="menu">
             <li class="item1"><a href="#">ссылочка</a></li>
         </ul>
     </div>
 
     <div class="content">
    Информация по ссылке
 </div>
 
</body>
</html>

Добавлено через 6 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Документ без названия</title>
</script>
</head>
<body>
 
     <div id="menu">
         <ul>
             <li class="item1"><a href="#">ссылочка</a></li>
         </ul>
     </div>
 
     <div id="content">
         Информация по ссылке
     </div>
 
</body>
</html>

Вот у меня страница и в корне у меня есть файл text.txt (в нем написано например: "Ajax успешно выполнен")
Я хочу чтобы перейдя по ссылке в id="menu" у меня обновился id="content" и вместо "Информация по ссылке" появилась информация файла text.txt не обновляя всю страницу, а только id="content". Как мне это реализовать? Дедлайн уже на днях, пожалуйста помогите!!!) Заранее огромное спасибо!)
И пожалуйста укажите что какую именно ссылку надо вставить в href вместо "#"?

@dzendev · 23.05.2016, 18:02

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $('#menu a').click(function (e) {
                e.preventDefault();    
                $.ajax({
                    url: 'text.txt', // указать правильный путь до файла (в данном случае фаил text.txt лежит в той же директории что и html документ)
                    success: function (data) {
                        $('#content').html(data);
                    }
                });
            });
        });
    </script>
 
</head>
<body>
    <div id="menu">
         <ul>
             <li class="item1"><a href="#">ссылочка</a></li>
         </ul>
     </div>
 
    <div id="content">Информация</div>
</body>
</html>

Всё это естественно запускается на сервере.

@beha96 · 23.05.2016, 19:40 **[ТС]**

dzendev, т.е. просто так с компа не получится?

Добавлено через 52 минуты
dzendev, в href так и оставим #? И почему не получится без сервера? Или можно как-то обойтись компом, или все таки сторонние приложения использовать? Например denwer?

@dzendev · 23.05.2016, 21:09

Сообщение от beha96

denwer

Denwer это и есть локальный сервер. Но лучше использовать openserver. Denwer подустарел.

Сообщение от beha96

в href так и оставим #?

Здесь решение зависит от того, как будет работать приложение. Вариантов два.
1. Должна быть предусмотрена работа с отключенным javascript в браузере пользователя.
Тогда в href пишется url страницы. Если js отключен происходит переход по ссылки, если включен происходит ajax запрос и страница не перезагружается.
2. Работа приложения не подразумевает работу без javascript
Тогда от использование ссылки можно вообще отказаться. Заменить например на тег span.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $('#menu span').click(function (e) {
                $.ajax({
                    url: 'text.txt', // указать правильный путь до файла (в данном случае фаил text.txt лежит в той же директории что и html документ)
                    success: function (data) {
                        $('#content').html(data);
                    }
                });
            });
        });
    </script>
 
</head>
<body>
    <div id="menu">
         <ul>
             <li class="item1"><span>ссылочка</span></li>
         </ul>
     </div>
 
    <div id="content">Информация</div>
</body>
</html>

@beha96 · 23.05.2016, 21:12 **[ТС]**

dzendev, Огромное спасибо, получилось!!! и ещё span тоже типа ссылка?
Ещё раз спасибо!

@dzendev · 23.05.2016, 21:19

Сообщение от beha96

ещё span тоже типа ссылка

ссылка это ссылка - тег <a>
Тег <span> это инлайновый тег, который ничего не обозначает, как и тег <div>. Используется только для визуального оформления.

@beha96 · 23.05.2016, 21:21 **[ТС]**

dzendev, Мне простительно, я только начинаю))) Пожелайте удачи)

@dzendev · 23.05.2016, 21:45

Сообщение от beha96

Пожелайте удачи)

Желаю тебе удачи на твоём пути...
Да избежит твоя задница свеч от геморроя,
Да пусть видят твои глаза без толстенных линз,
И спина не станет как у горбуна Квазимоды!!!

Во имя гугла, ютьюба и гмайл. Аминь

... Тьфу ты какой аминь - Риктусемпра

@beha96 · 23.05.2016, 22:13 **[ТС]**

dzendev,

)да чувствую прилив энергии

)
Ну берегись Билл Гейтс

@beha96 · 29.05.2016, 23:25 **[ТС]**

Ребята, я залил все файлы на bitbucket и теперь он там без denwer-а, как решить эту проблему? а то без сервера (в моём понимании без denwer-а) он не работает

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	30.04.2016, 17:26 [ТС]
	kloks, на этой строке $("#my_link").click(function(e) { такая ошибка: $ is not defined 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	01.05.2016, 23:47
	beha96, вы пробуете локально, или загрузили все ваши файлы куда-то на сервер? 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	04.05.2016, 15:19 [ТС]
	dzendev Ну в коде то он на скрипте это я здесь вручную добавил эту часть и забыл про тег <script> whiteapps пока что просто для проверки локально (с диска) 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.05.2016, 16:28
	beha96, локально с веб сервером или просто открываете html файл? без веб сервера ajax запрос не отправится 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	06.05.2016, 19:22
	... и без $(document).ready(); тоже. ТС, вы знаете, что такое Консоль? 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	23.05.2016, 19:40 [ТС]
	dzendev, т.е. просто так с компа не получится? Добавлено через 52 минуты dzendev, в href так и оставим #? И почему не получится без сервера? Или можно как-то обойтись компом, или все таки сторонние приложения использовать? Например denwer? 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	23.05.2016, 21:12 [ТС]
	dzendev, Огромное спасибо, получилось!!! и ещё span тоже типа ссылка? Ещё раз спасибо! 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	23.05.2016, 21:21 [ТС]
	dzendev, Мне простительно, я только начинаю))) Пожелайте удачи) 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	23.05.2016, 22:13 [ТС]
	dzendev, )да чувствую прилив энергии ) Ну берегись Билл Гейтс 0

@beha96 0 / 0 / 0 Регистрация: 27.03.2016 Сообщений: 14
	29.05.2016, 23:25 [ТС]
	Ребята, я залил все файлы на bitbucket и теперь он там без denwer-а, как решить эту проблему? а то без сервера (в моём понимании без denwer-а) он не работает 0

HTML Ajax jQuery

Решение