Как написать Ajax запрос правильно?

@LongTime · Регистрация: 16.11.2019

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

У меня есть функция php, "Out()" добавляющая несколько div в index.html. Как написать Ajax-код так, чтобы он запрашивал эту функцию и соответственно каждый раз после нажатия создавался новый div?

@esculap_ra · 17.11.2019, 02:31

Тут не нужен запрос - просто манипуляция, типа,

CSS
1
2
3
4
5
6
7
<style>
.red{
background:red;
width:20px;
height:20px
}
</style>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 <script type="text/javascript">
  var  idx= 0;
  var margin = 30;
 
function addDIV(){
var id = idx;
idx++;
console.log(idx);
 
$("div#d"+id ).append("<div class='red' id='d"+idx+"' style='margin-top:"+margin+"px'>DIV</div>");
margin=margin++;
}
</script>

HTML5
1
2
<div id="d0"></div>
<button onClick="addDIV()">ADD DIV</button>

Каждый клик создает новый див.

Добавлено через 4 минуты
В принципе можно организовать и запросом к серверу, но какой смысл внедрять много ? Разве что поиграться...

@LongTime · 17.11.2019, 02:43 **[ТС]**

esculap_ra, функция php возвращает изображения, видео и прочий контент внутри этих div, так что в даннои случае, так понимаю, валиден только ajax. Сам метод вполне справляется с единичным выводом при загрузке страницы, но вот работу по клику организовать у меня не выходит

@esculap_ra · 17.11.2019, 03:40

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <script>
      
  function get(task,params=null){ 
url= //ссылка на обработчик
     $.ajax(
     {
       url : url,
       type:"post", //или get
       dataType:"json",
       data :
       {
         task:task,
         params:params //если требуется задать какие-нибудь параметры
         }
       ,
       success: function (data)
       {
           $('div#'+data.idx).html(data.content);
        }
      }
     );
    }
</script>

HTML5
1
2
<button onClick="get('GetContent')">Get Content</button>
<button onClick="get('GetImage')">Get Image</button>

Это обработчик на сервере

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    function GetContent(){
    $return['content'] = // тут получаем контент в виде структуры html
    $return['idx']= 'id_content'; // на страннице должен быть див с таким ИД    
    echo json_encode($return);
    exit;
    }
    
    function GetImage(){
    // аналогично, только для картинок   
    }
    
    $task=$_POST['task'];//или $_GET['task'
    $function=$task;
     if(isset($function))
          $this->$function();

В примере я использовал основу моего рабочего кода из одного проекта.

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

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

$function=$task; if(isset($function)) $this->$function();

Это не будет работать в таком виде (у меня сделано как метод класса).
Просто сделаем иначе

PHP
1
2
3
4
5
6
switch ($task){
case 'GetContent': GetContent();
break;
case 'GetImage': GetImage();
break;
}

@LongTime · 17.11.2019, 14:20 **[ТС]**

esculap_ra, в indexe написал следующие строки:

HTML5
1
<button onClick="get('GetContent')">Get Content</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
      
  function get(task){ 
 //ссылка на обработчик
     $.ajax(
     {
       url : ".GetPHP.php",
       type:"post", //или get
       dataType:"json",
       data :
       {task:task, params:params        //если требуется задать какие-нибудь параметры
         }
       ,
       success: function (data)
       {
           $('div#'+data.idx).html(data.content);
        }
      }
     );
    }
</script>

в GetPHP.php следующие:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
$task=$_POST['task'];
switch ($task){
case 'GetContent': GetContent();
break;
}
function GetContent(){
Output();
    $return['content'] = $wimage;// тут получаем контент в виде структуры html
    $return['idx']= 'superbox'; // на страннице должен быть див с таким ИД    
    echo json_encode($return);
    exit;
    }

Ноль реакции

@u4en1k · 17.11.2019, 16:35

esculap_ra, вопрос чуть не по теме, но в тему, а если я пишу таким образом ответ от сервера

PHP
1
2
3
4
5
                        echo json_encode(array(
                          'result'=>'success',
                          'total'=>$total,
                          'html'=>$product
                        ));

затем проверяю result что вернул и дальше уже вывожу информацию в необходимый div. Или мне лучше собирать массив как Вы показали?

PHP
1
2
3
4
5
$return['result'] = 'success'; // может быть так же error, но это не суть.
$return['total'] = $total; // тут вместо переменной данные
$return['html'] = $product; // тут вместо переменной данные 
echo json_encode($return);
return;

Код будет работать одинаково, вопрос как бы в том, как лучше и как правильней?

@esculap_ra · 17.11.2019, 17:22

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

url : ".GetPHP.php"

Это что?
УРЛ может быть "GetPHP.php" "http://domen_name/GetPHP.php"
В браузере открой вэб-консоль и смотри запрашиваемые страницы.

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

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

как лучше и как правильней?

Да без разницы. Я привел пример из своей функции

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
 private function ajaxResponseDone($message,$params=null)
     {
     if(isset($params))
         foreach($params as $key=>$value)
       {
         $return[$key]=$value;
       }
       $return['status']='Done';
       $return['result']=$message;
       $return['success']=true;
        echo json_encode($return);
          exit  ;
     }

В нее могут передаваться дополнительные параметры, поэтому мой вариант удобнее с точки зрения читабельности кода.

@TolikD · 17.11.2019, 21:56

LongTime, ТС просит Ajax, почему бы и нет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="button" value="Out()" onclick="out()">
<script>
    var UF=undefined;
     
    function out() {
        script = 'out.php';
        var xhr = new XMLHttpRequest();
        xhr.open("GET", script);
        xhr.onreadystatechange = function() {
          if (this.readyState != 4) return;
          document.body.innerHTML += this.responseText;
        }
        xhr.send();
    }
</script>

out.php

PHP
1
2
<?php
echo '<div>Test</div>';

Всё остальное, это навороты

@TolikD · 18.11.2019, 10:33

Строка лишняя))

HTML5
1
var UF=undefined;

@LongTime · 18.11.2019, 23:45 **[ТС]**

TolikD, на странице есть плеер ютуб, он почему-то перезагружается при появлении текста

@TolikD · 19.11.2019, 10:48

LongTime, я для примера показал решение "в лоб", с перерисовкой тела документа. Вам ничего не мешает отделить вставку от основного документа и туда вставляйте дивы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="button" value="Out()" onclick="out()">
<div id="divinsert"></div>
<script>
     
    function out() {
        script = 'out.php';
        var xhr = new XMLHttpRequest();
        xhr.open("GET", script);
        xhr.onreadystatechange = function() {
          if (this.readyState != 4) return;
          divinsert.innerHTML += this.responseText;
        }
        xhr.send();
    }
</script>

Если же надо делать вставку DOM совсем как принято, то надо так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="button" value="Out()" onclick="out()">
<script>
    function out() {
        script = 'out.php';
        var xhr = new XMLHttpRequest();
        xhr.open("GET", script);
        xhr.onreadystatechange = function() {
          if (this.readyState != 4) return;
          div = document.createElement('div');
          div.innerHTML = this.responseText;
          document.body.append(div);
        }
        xhr.send();
    }
</script>

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Old Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@LongTime 0 / 0 / 0 Регистрация: 16.11.2019 Сообщений: 5

	Как написать Ajax запрос правильно? 17.11.2019, 01:35. Показов 1081. Ответов 10 Метки ajax, html, php, javascript (Все метки) У меня есть функция php, "Out()" добавляющая несколько div в index.html. Как написать Ajax-код так, чтобы он запрашивал эту функцию и соответственно каждый раз после нажатия создавался новый div? 0

@LongTime 0 / 0 / 0 Регистрация: 16.11.2019 Сообщений: 5
	17.11.2019, 02:43 [ТС]
	esculap_ra, функция php возвращает изображения, видео и прочий контент внутри этих div, так что в даннои случае, так понимаю, валиден только ajax. Сам метод вполне справляется с единичным выводом при загрузке страницы, но вот работу по клику организовать у меня не выходит 0

@LongTime 0 / 0 / 0 Регистрация: 16.11.2019 Сообщений: 5
	18.11.2019, 23:45 [ТС]
	TolikD, на странице есть плеер ютуб, он почему-то перезагружается при появлении текста 0