Блог

Главная - Вопросы по программированию - Пример перезагрузки Ajax php в divs

Пример перезагрузки Ajax php в divs

#javascript #php #jquery #ajax

#javascript #php #jquery ( jquery ) #ajax

Вопрос:

У меня возникли проблемы с перезагрузкой php-файла в 3 отдельных раздела независимо через ajax.
Существует тонна старого кода, поэтому я пытаюсь найти самое последнее элегантное решение. Я основал эту версию на этом коде из https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax который загружает текстовый файл.

Основной index.php файл содержит 3 контейнера с областями div1, div2 и div3 в каждом. Для каждого есть кнопка, которая должна перезагрузить страницу php с именем colors.php в каждый отдельный div. The colors.php страница показывает другой цвет каждый раз, когда она загружается. Это так. Перезагрузите страницу, чтобы увидеть изменение цвета. http://spillway.com/example/colors.php

Вот попытка http://spillway.com/example

Спасибо за любую информацию.

Код:

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax php reload div example</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
<!-- set up div links with ajax -->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "colors.php", success: function(result){
      $("#div1").html(result);
    }});
  });
});
</script>
        
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "colors.php", success: function(result){
      $("#div2").html(result);
    }});
  });
});
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "colors.php", success: function(result){
      $("#div3").html(result);
    }});
  });
});
</script>

<!-- CSS for divs and containers -->

    <style>
        
        
    .container1 {
          position: absolute;
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 100px;
          top: 25%;
          padding: 10px;
      }
    .container2 {
          position: absolute;
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 500px;
          top: 25%;
          padding: 10px;
      }
    .container3 {
          position: absolute;
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 900px;
          top: 25%;
          padding: 10px;
      }
    .div1 {
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 100px;
          top: 25%;
          padding: 10px;
      }
    .div2 {
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 100px;
          top: 25%;
          padding: 10px;
      }
    .div3 {
          margin: auto;
          border: 3px solid green;
          text-align: center;
          left: 100px;
          top: 25%;
          padding: 10px;
      } 
        
    </style>
    


    
<body>
<!-- container divs and div1 div2 div3 with buttons -->


<!-- first div --------------------------------------------------->
    
    <div class="container1">
        <button>reload color php</button><br>
        <div class="div1">
        <h2>div1</h2>
        
        </div>
    </div>
    
<!-- second div --------------------------------------------------->    
    <div class="container2">
        <button>reload color php</button><br>
        <div class="div2">
        <h2>div2</h2>
        
        </div>
    </div>
    
<!-- third div ---------------------------------------------------> 
    <div class="container3">
        <button>reload color php</button><br>
        <div class="div3">
        <h2>div3</h2>
            
        </div>
    </div>
    
    
</body>
</html>

Ответ №1:

Проблема, с которой вы столкнулись, заключается в том, что вы добавляете более одного обработчика кликов button , а не конкретную кнопку, а ВСЕ из них.

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

Другая проблема, с которой вы сталкиваетесь, заключается в том, что файлы, которые вы загружаете через ajax, на самом деле содержат ПОЛНЫЕ теги html / body, но они не должны, они должны содержать только элементы HTML (или JSON, но для моего примера я использую HTML).

 $(document).ready(function(){
  $("button").click(function(){
    target = $(this).parent("div").find("div");
    $.ajax({url: "colors.php", success: function(result){
      target.html(result);
    }});
  });
});

css

 .color-div{
  width:50px;
  height:50px;
}

для ваших цветных файлов просто включите div с цветом фона и класс, который задает размер div.

 <div class='color-div' style='background-color:#FF0000'></div>

Комментарии:

1. Спасибо за ответ. Я обнаружил, что div ссылается на класс вместо идентификатора, который, казалось, работал для текста, когда я попробовал только одну кнопку. spillway.com/example/index-1div-txt.html Но я все еще не могу получить даже .html для загрузки в div с помощью этого кода. Еще один тест только одной кнопки. spillway.com/example/index-1div.php Он должен просто загрузить эту HTML-страницу spillway.com/example/red.html

2. @JohnCulhane Я обновил свой ответ, включив в него другую проблему, с которой вы столкнулись, с решением для нее.