0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
    <?PHP

    $var = rand(1,100);
    echo $var;
    ?>
</div>

<a id="refresh">Обновить</a>

Как с помощью JQuery обновить div, чтобы переменная приняла новое значение и вывелась.

2
  • В чём заключается ваш вопрос?
    – 0xdb
    11 янв 2018 в 12:40
  • Как с помощью JQuery обновить div, чтобы переменная приняла новое значение и вывелась. 11 янв 2018 в 12:48

2 ответа 2

1

Надо понимать, когда работает php, а когда js, в частности, что когда начинает работать второе (на клиенте) то первое (на сервере) уже свою работу завершило

index.php:

 <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div id="example">
       <?php include "rand.php" ?>
   </div>

    <a id="refresh">Обновить</a>
</body>

скрипт генерации числа rand.php

<?php
    echo rand(1,100);

Теперь дописываем index новым js-кодом для запрашивания нового значения с сервера

<script type="text/javascript">

    $("#refresh").click(function(e){
        e.preventDefault();
        $("#example").load('rand.php');
    });

</script>
1

Надеюсь, Вы понимаете, что без сервера php работать не будет. А если страница лежит на сервере, то можно двумя путями:

1. С перезагрузкой страницы:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
<?php
  $var = rand(1,100);
  echo $var;
?>
</div>

<a id="refresh">Refresh</a>

<script>
$('#refresh').click(function(){
  location.reload();
});
</script>

UPD 2. Без перезагрузки (с использованием ajax):
1. создаём отдельный файл rand.php, куда выносим php-скрипт:

<?php
  $var = rand(1,100);
  echo $var;
?>


2. В ajax-запросе (по клику на refresh) получаем данные:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
<?php
  $var = rand(1,100);
  echo $var;
?>
</div>

<a id="refresh">Refresh</a>

<script>
  $('#refresh').click(function(){
    $.ajax({
    url: 'rand.php',
    success: function(data){
      $('#example').html(data);
    }
  });
});
</script>
5
  • он у вас там рекурсивно страницу в див будет записывать таким образом.
    – teran
    11 янв 2018 в 12:56
  • @teran, ну это ж условный пример - понятно, что php-скрипт, к которому обращается ajax, должен лежать отдельно и возвращать только цифру. Я потестил на локальном хосте и специально добавил $('#refresh').css('display', 'none'), чтобы кнопка refresh не дублировалась. 11 янв 2018 в 12:58
  • Не нравится этот способ, т.к. в div много контента. Может другой есть? 11 янв 2018 в 13:05
  • @АндрейДиневич, в смысле - "много контента"? 11 янв 2018 в 13:05
  • @teran, обновил ajax-вариант, чтобы никого не смущать. 11 янв 2018 в 13:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.