How to submit a form without reloading the page?

D

D1va2021-07-22 05:18:25

AJAX

D1va, 2021-07-22 05:18:25

Help with the send function. The form is working fine and sending too, everything loads on! Hurray. But how do I change the function(// Filter) so that it sends to the get address bar. And then sends as post. type: "GET" doesn't help. I need the get function for the paginator; for some reason, it does not pick up variables from post. Simply put, how would I add a mock submit to the function // Filter

index.php

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<form id="filter" action="#" width="250" method="get">
            <label><input class="check" id="check-option-1" type="checkbox"  name="ex" value="1" />1<br /></label>
            <label><input class="check" id="check-option-2" type="checkbox"  name="ex" value="2" />2<br /></label>
            <label><input class="check" id="check-option-3" type="checkbox"  name="exq[]" value="3" />3<br /></label>
            <label><input class="check" id="check-option-4" type="checkbox"  name="exq[]" value="4" />4<br /></label>

<input type="submit" name="btn" id="btn" class="button block" value="Показать" >        
</form>
<br />
<div id="app"><? include "app.php" ?></div>
<div class="avatarScaler" style="display:none;">
          <div id="showmore-triger" data-page="<? echo $page ?>" data-max="<?php echo $amt; ?>">
              <div class="preload-inner">
                <div class="preload-dot preload-dot-1"></div>
                <div class="preload-dot preload-dot-2"></div>
                <div class="preload-dot preload-dot-3"></div>
              </div>
          </div>
        </div>

<script>
// Filter
$(function(){
$("#filter").submit(function(e) {
    e.preventDefault();
    $.ajax({
        //type: 'GET',
        url: 'app.php',
        data: $(this).serialize(e),
        success: function(r) {
          $("#app").empty();
          $("#app").append(r);
        }
    });
});
});
// Filter

// Page
var block_show = false;
 
function scrollMore(){
  var $target = $('#showmore-triger');
  
  if (block_show) {
    return false;
  }
 
  var wt = $(window).scrollTop();
  var wh = $(window).height();
  var et = $target.offset().top;
  var eh = $target.outerHeight();
  var dh = $(document).height();   
 
  if (wt + wh >= et || wh + wt == dh || eh + et < wh){
    var page = $target.attr('data-page');	
    page++;
    block_show = true;
 
    $.ajax({
      url: '/app.php?<? echo $l; ?>&page=' + page,  
      dataType: 'html',
      success: function(data){
        $('#app').append(data);
        block_show = false;
      }
    });
 
    $target.attr('data-page', page);
    if (page ==  $target.attr('data-max')) {
      $target.remove();
    }
  }
}
 
$(window).scroll(function(){
  scrollMore();
});
  
$(document).ready(function(){ 
  scrollMore();
});
// Page
</script>
</body>
</html>

app.php (Paginator)

$limit = 15;

// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;				
$start = ($page != 1) ? $page * $limit - $limit : 0;

$exq = implode(',', (array)$_GET["exq"]);

    $params = array(
        'limit' => $limit,
        'ex' => $_GET['ex'] ?? '1',
        'exq' => $exq,
        'page' => $page
    
    );
    // Переводим массив в JSON
    $l = urldecode(http_build_query($params));

    $res = json_decode(file_get_contents('https://example.com?' . $l), true);

$total = 10000;
 
$amt = ceil($total / $limit);

echo '<pre>';
print_r(res);
echo '</pre>';