я разные варианты пробовал ни один несработал
|
Вот файл data.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="data.php" method="post" onsubmit="return submitHandler(this);">
<input type="text" name="name" placeholder="Имя">
<input type="number" name="age" placeholder="Возраст">
<button>Оправить</button>
<output></output>
</form>
<script>
function submitHandler(form) {
var dataToSend = {};
for(const [key, value] of new FormData(form)) {
dataToSend[key] = value;
}
fetch(form.action, {
method: form.method,
body: JSON.stringify(dataToSend)
})
.then(function(response) { return response.json(); })
.then(function(data) {
form.querySelector("output").textContent = `
Получено от сервера:
Имя: ${data.name},
возраст: ${data.age}
`;
})
.catch(function(data) {
form.querySelector("output").textContent = `
Нет ответа от сервера!
`;
})
;
return false;
}
</script>
</body>
</html>
Вот файл data.php
<?php
$str = file_get_contents('php://input');
$data = json_decode($str);
header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);
поместите их в одну папку, которая доступна публично на вашем сервере, который работает с PHP. Откройте файл data.html с сервера (если у вас папка публично доступна по адресу https://example.com/, то это будет https://example.com/data.html) Заполните форму, отправьте, ответ от сервера появится рядом! Исследуйте код! UPD Ваше лукошко что-то не пингуется, что бы это значило? Код:
~/Desktop/img is 📦 v1.0.0 via ⬢ v10.15.3 via 🐘 v7.0.33 took 27m 18s Код:
~/Desktop/img is 📦 v1.0.0 via ⬢ v10.15.3 via 🐘 v7.0.33 Код:
11: ae-3-3.bear1.Manchesteruk2.Level3.net 109.038ms asymm 12 |
спасибо попробую
|
а в функцию form - параметр как передать саму форму?
|
по id?
|
запутано все мне оно неподойдет мне нужно просто данные принять и все
|
эта функция уже работает с этой формой или нужно в нее передать как то форму?
|
а вижу работает тогда как сделать редирект на нужную страницу в таком случае?
|
при нажатии на баттон
|
let oplata = document.getElementById('oplata');
oplata.setAttribute('value', 'Оплатить: ' + sum + ' грн.');
document.getElementById('oplata1').innerHTML = '<input type="button" id="oplata" name="buy" value="" onClick="location.href=\'liqpay/liqpay.php\'">';
$("#customer-data").val(obshiyMassive);
выше файл shop.js
ниже index.php вставил код с файла data.html
<form action="liqpay/liqpay.php" method="post" onsubmit="return submitHandler(this);">
<div>ФИО: <input type="text" id="customer-name"></div>
<div>Телефон: <input type="text" id="customer-phone"></div>
<div>E-mail: <input type="text" id="customer-email"></div>
<div id="otdel">Отделение новой почты: <input type="text" id="customer-dostavka"></div>
<input type="hidden" name="name" value="" id="customer-data" ></div>
<div id="oplata1">
<hr>
</form>
<script>
function submitHandler(form) {
var dataToSend = {};
for(const [key, value] of new FormData(form)) {
dataToSend[key] = value;
}
fetch(form.action, {
method: form.method,
body: JSON.stringify(dataToSend)
})
.then(function(response) { return response.json(); })
.then(function(data) {
form.querySelector("output").textContent = `
Получено от сервера:
ФИО: ${data.customer-name},
Телефон: ${data.customer-phone},
E-mail: ${data.customer-email},
Отделение новой почты: ${data.customer-dostavka},
Данные: ${data.customer-data}
`;
})
.catch(function(data) {
form.querySelector("output").textContent = `
Нет ответа от сервера!
`;
})
;
return false;
}
|
результат после редиректа всеравно null
|
Такое выдало перед редиректом
Resource interpreted as Document but transferred with MIME type application/json http://korzinka.byethost9.com/liqpay/liqpay.php |
советуют использовать dataType: "jsonp"
ток где указать этот тип в моем случае если конечно в этом проблема |
поменял исчезло предупреждение но данные так и непринял сервер null
<?php $str = file_get_contents('php://input'); $data = json_decode($str); header('Content-Type: jsonp; charset=utf-8'); echo json_encode($data); ?> |
Цитата:
Цитата:
Цитата:
|
в liqpay.php кнопка находится которая принимает все данные и дальше отправляет клиенат на страницу оплаты компании liqpay
|
хотел ее разместить на index.php но оттуда неработала а с liqpay.php работает потому нужно данные туда отправить
|
Цитата:
Почему нельзя сразу отправить на страницу оплаты компании liqpay, т. е. A -> C Цитата:
Я не понял вашу чудесную логику взаимоисключающих идей: скрипт и печатать должен, и ещё перенаправлять! |
Я хотел ее размемстить пункте А но пункт а по непонятным мне причинам отказался активировать нажатие по этой кнопке
|
на отдельной странице работает чтото в моем коде ей мешает чтоб нековырять пункт А решил передать информацию в пункт Б
|
Цитата:
Цитата:
|
ну а логично подумать от чего неработает active?
|
у формы
|
Цитата:
|
Все зделал все работает вот результат
http://korzinka.byethost9.com/ |
jobananada, я рад, что вы разобрались с формой!
А загрузка пол-гигабайта? Сделайте, чтобы не показывало больше карточек, чем размер экрана! |
я незнаю как загружать часть экрана нужно копатся в инфе
|
Вот код который подгружает все карты на главную как сделать чтоб выводилась только видимая часть экрана
function showCategories(data,cool){
let j = cool;
//console.log(j);
let out = '';
for (let i = 0; i < data.length; i++){
if (data[i]['gsx$show']['$t'] != 0){
if(data[i]['gsx$category']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 0){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(data[i]['gsx$type']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 1){
}
}
}
return out;
}
|
|
А как этот способ использовать в моем примере?
https://appelsiini.net/projects/lazyload/ |
Вот развернутый выведеный кусок кода единичный проход цикла что мне тут изменить
<div class="goods-cart"> <div class="goods-name">Бананка Duo</div> <div class="goods-img" id="goods-image"> <img id="0" class="square" src="некоторое фото"> <span class="text">Кликни фото для просмотра</span> </div> <div class="goods-cost">Цена: 189</div> <div class="goods-pol">Пол: женский</div> <div class="goods-knopka"> <button id="but" name="add-to-cart" data="0">Купить</button> </div> </div> |
Пробую решать таким способом
<div class="goods-cart">
<div class="goods-name">Бананка Duo</div>
<div class="goods-img" id="goods-image">
<img id="0" class="lazy" data-original="некоторое фото">
<span class="text">Кликни фото для просмотра</span>
</div>
<div class="goods-cost">Цена: 189</div>
<div class="goods-pol">Пол: женский</div>
<div class="goods-knopka">
<button id="but" name="add-to-cart" data="0">Купить</button>
</div>
</div>
$(document).ready(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
|
А ну и без этого никак
<script src="shop/jquery.lazyload.min.js" charset="utf-8"></script> библиотека лейзилоад и jquery |
Почемуто пустые картинки вроди все сделал правильно
|
Все получилось ура)
function showCategories(data,cool){
let j = cool;
//console.log(j);
let out = '';
for (let i = 0; i < data.length; i++){
if (data[i]['gsx$show']['$t'] != 0){
if(data[i]['gsx$category']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="lazy" data-original="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 0){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="lazy" data-original="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(data[i]['gsx$type']['$t'] == j){
let str = data[i]['gsx$image']['$t'];
let im = str.split(',')[0];
out +=`<div class="goods-category-cart">`;
out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
out +=`<div class="goods-img" id="goods-image">
<img id="${data[i]['gsx$id']['$t']}" class="lazy" data-original="${im}">
<span class="text">Кликни фото для просмотра</span>
</div>`;
out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
out +=`</div>`;
}else if(j == 1){
}
}
}
/*ЗАГРУЗКА ФОТОГРАФИЙ ТОВАРОВ ПО МЕРЕ СКРОЛЛИНГА*/
$(document).ready(function () {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
return out;
}
|
Только оно загружает именно всю страницу до скроллига а как сделать чтоб оно загружало только видимую часть и удаляло то что прокрутил или скрывало незнаю и мне ненравится задержка без нее вроди карисивее и быстрее загружались а вот счас когда на каждое фото вешается событие то получается дольше загружается возможно есть альтернатива этому?
|
| Часовой пояс GMT +3, время: 16:21. |