D1va
@D1va

Как отправить форму без перезагрузки страницы?

Помогите с функцией отправки. Форма работает нормально и отправка тоже, все подгружает на !УРА. Но как надо изменить function(// Filter), чтобы он отправлял в адресную строку get. А то отправляет как post. type: "GET" не помогает. Функция get мне необходима для пагинатора он почему-то не подхватывает переменные из post. Проще говоря как бы добавить имитацию submit для функции // 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(Пагинатор)

$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>';
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы