Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 16.11.2019
Сообщений: 5
1

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

17.11.2019, 01:35. Показов 706. Ответов 10

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

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.11.2019, 01:35
Ответы с готовыми решениями:

Как правильно написать AJAX запрос
Парни всем привет. Подскажите пожалуйста как правильно составить AJAX запрос для обработки формы. ...

Как правильно считать данные, полученные через Ajax?
Ajax отправляет в php-скрипт: var name = $('#name').val(); var phone =...

AJAX - как сделать запрос к PHP-коду без перезагрузки страницы
Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы...

Как написать скрипт на ajax
Здраствуйте помогите пожалуйсто, мне нужна программа которая с помощью ajax в онлайн режиме...

10
460 / 263 / 55
Регистрация: 22.08.2010
Сообщений: 1,199
Записей в блоге: 4
17.11.2019, 02:31 2
Тут не нужен запрос - просто манипуляция, типа,
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 минуты
В принципе можно организовать и запросом к серверу, но какой смысл внедрять много ? Разве что поиграться...
0
0 / 0 / 0
Регистрация: 16.11.2019
Сообщений: 5
17.11.2019, 02:43  [ТС] 3
esculap_ra, функция php возвращает изображения, видео и прочий контент внутри этих div, так что в даннои случае, так понимаю, валиден только ajax. Сам метод вполне справляется с единичным выводом при загрузке страницы, но вот работу по клику организовать у меня не выходит
0
460 / 263 / 55
Регистрация: 22.08.2010
Сообщений: 1,199
Записей в блоге: 4
17.11.2019, 03:40 4
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;
}
0
0 / 0 / 0
Регистрация: 16.11.2019
Сообщений: 5
17.11.2019, 14:20  [ТС] 5
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;
    }
Ноль реакции
0
133 / 118 / 34
Регистрация: 04.04.2018
Сообщений: 585
17.11.2019, 16:35 6
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;
Код будет работать одинаково, вопрос как бы в том, как лучше и как правильней?
0
460 / 263 / 55
Регистрация: 22.08.2010
Сообщений: 1,199
Записей в блоге: 4
17.11.2019, 17:22 7
Цитата Сообщение от 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  ;
     }
В нее могут передаваться дополнительные параметры, поэтому мой вариант удобнее с точки зрения читабельности кода.
1
117 / 81 / 36
Регистрация: 30.07.2017
Сообщений: 370
17.11.2019, 21:56 8
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>';
Всё остальное, это навороты
0
117 / 81 / 36
Регистрация: 30.07.2017
Сообщений: 370
18.11.2019, 10:33 9
Строка лишняя))
HTML5
1
var UF=undefined;
0
0 / 0 / 0
Регистрация: 16.11.2019
Сообщений: 5
18.11.2019, 23:45  [ТС] 10
TolikD, на странице есть плеер ютуб, он почему-то перезагружается при появлении текста
0
117 / 81 / 36
Регистрация: 30.07.2017
Сообщений: 370
19.11.2019, 10:48 11
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>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.11.2019, 10:48

Как узнать на стороне сервера, какой тип данных передан через ajax запрос
Здравствуйте друзья и снова к вам с просторов поисковиков. В общем у меня такая задача. Я посылаю...

Как правильно сформировать запрос к БД?
Пишу скрипт на php с обращением к MySQL. Столкнулся с такой неприятностью: скрипт делает запрос на...

Как правильно писать запрос к БД MySql?
Я уже давно работаю с MySql. Даже сейчас, поиск в интернете выводит mysql_connect и процедурный...

Подскажите, как правильно сделать запрос
База данных называется knig таблица avtor в ней по полю Imya текстовому нужно совершить поиск я...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.