jQuery $ .ajax не передает переменную в PHP

Question

Я хочу сделать кнопку «показать больше» с помощью jQuery AJAX. У меня есть кнопка с loaded атрибута следующим образом:

<button type="button" class="smbt btn center-block" data-loaded="3">Show More</button> 

В яваскрипта файле я написал это:

var smbt = $(".smbt"); 

smbt.click(function() { 
    var limit = $(smbt).attr('loaded'); 
    // alert(loaded + " picture"); 

    $.ajax({ 
     url: '../view/profile.php', 
     type: 'POST', 
     data: ({limit1: limit}), 
     success: function(result) { 
      console.log("success"); 
     }, 
     error: function() { 
      alert("error"); 
     } 
    }); 

Тогда я пытаюсь получить limit1 переменную:

$limit = $_POST["limit1"]; 

I прочитайте документацию $.ajax и много вопросов и ответов, я пробовал много сделать, чтобы она работала, но она всегда дает эту ошибку:

Undefined index: limit1

Answer 1

Если кто-то когда-то тоже был эта проблема именно так я и сделал.

Так что есть profile.php, который содержит и показывает загруженные фотографии. Я хочу использовать кнопку, которая увеличивает LIMIT в sql. Таким образом, profile.php содержит все. Существует div, который содержит результаты запроса wit-изображений и после того, как у него есть кнопка загрузки больше. Это выглядит следующим образом:

<div class="row mg-bt-20" id="cont"> 
       <?php 
        if ($result->num_rows > 0) { 
        // output data of each row 
         while($row = $result->fetch_assoc()) { 
          echo " <div class='col-md-4 col-sm-6 mg-bt-20'> 
             <div class='pics' data-toggle='modal' data-id='".$row['id']."' data-target='#myModal'> 
             <img src='" . $row['path'] . "'> 
             <p class='text-center' style='line-height: 6vh;'>". $row["description"] ."</p> 
             </div> 
            </div>"; 
         } 
        } else { 
         echo "<p style='text-align: center; color:#fff; font-size: 20px;'>No posts yet.</p>"; 
        } 
       ?> 
      </div> 

Проблема заключалась в попытке отправить переменную этого profile.php, но это не работает. Я пробовал все, но он просто не работает. Так что я сделал новый PHP файл с именем show_more.php, который содержит только результаты запроса из PHP кода выше:

<?php 
    if ($result->num_rows > 0) { 
    // output data of each row 
     while($row = $result->fetch_assoc()) { 
      echo " <div class='col-md-4 col-sm-6 mg-bt-20'> 
         <div class='pics' data-toggle='modal' data-id='".$row['id']."' data-target='#myModal'> 
         <img src='" . $row['path'] . "'> 
         <p class='text-center' style='line-height: 6vh;'>". $row["description"] ."</p> 
         </div> 
        </div>"; 
     } 
    } else { 
     echo "<p style='text-align: center; color:#fff; font-size: 20px;'>No posts yet.</p>"; 
    } 
?> 

Так что мой JQuery код:

var smbt = $(".smbt"); 
    var limit = $(smbt).data('loaded'); 

    smbt.on('click',function(event) { 
     event.preventDefault(); 
     limit += 3; 
     console.log(limit); 
     // alert(loaded + " picture"); 

     $.ajax({ 
      url:"../php/show_more.php", 
      data: {limit1: limit}, 
      success:function(data){ 
       $("#cont").html(data); 
      } 
     }); 

Это успешно отправить предел1 переменную к show_more.php.

В show_more.php Я просто пишу $_POST["limit1"], чтобы получить данные.

И SQL-запрос выглядит следующим образом:

$sql = "SELECT * FROM images where user = '$username' ORDER BY id DESC LIMIT $limit"; 

Так вот как это работа:

Прежде всего, когда profile.php подгружались картина показывает, если у вас есть один, но его ограниченный только показанным только 3. Поэтому после того, как вы нажмете кнопку «Загрузить больше», он запускает код ajax, который увеличивает предельную переменную с 3, поэтому мы получаем новый номер, который теперь равен 6 (я всегда увеличиваю с 3). Код ajax сначала отправляет данные на указанный URL-адрес, который является show_more.php в этом случае. Я пишу его в oop, поэтому у меня есть класс, который обрабатывает всю вещь изображения, и у меня есть функция, в которой отображаются изображения, поэтому я просто передаю в ней переменную вроде этого public function showImg($limit){...}. Итак, вот где происходит волшебство. Когда я нажимаю, он всегда меняет лимит. после того, как это произошло в коде ajax, часть успеха обрабатывает результат. Результатом будет html-код, который будет добавлен в контейнер изображения.

Надеюсь, я помогу с этим, и я не писал глупых вещей (также извините за мой английский). Это работает для меня в этой форме.

И спасибо всем, чья помощь.

Answer 2

Попробуйте это:

var smbt = $(".smbt"); 

smbt.click(function() { 
    var limit = $(smbt).data('loaded'); 

    $.ajax({ 
     url: './view/profile.php', 
     type: 'POST', 
     data: {limit1: limit}, 
     success: function(result) { 
      console.log("success"); 
     }, 
     error: function() { 
      alert("error"); 
     } 
    }); 
}); 

Вы используете данных- * атрибут, поэтому, чтобы получить значение, используйте $ .data() функция: https://api.jquery.com/jquery.data/