Страницы

Поиск по вопросам

Показаны сообщения с ярлыком ajax. Показать все сообщения
Показаны сообщения с ярлыком ajax. Показать все сообщения

понедельник, 13 апреля 2020 г.

Вернуть $.ajax data в return функции

#jquery #ajax #javascript

                    
Есть аякс запрос в функции
function Check_production(order_number){
var result = false;

$.ajax({
   url: "load/check_production.php",
   cache: false,
   async: false,
   data: {zakaz_number:zakaz_number}, 
   type: 'POST',
   success: function(data){
        if (data == "true"){
            result = true;
        }else {
            result = false;
        }
   }
 });

return result;

}
Можно ли сделать более красиво без отключения асинхронного запроса / локальной переменной
/ каким либо еще способом, чтобы Check_production вернула result?    


Ответы

Ответ 1



Посмотрите в сторону объекта Deferred, пример с ajax: function SomethingInit(id){ this.init = function(id) { // Загрузка с сервера информации this.load(id).done(function() { // ... здесь продолжается инициализация ... alert("продолжаем после успешного запроса"); }).fail(function(message) { alert('ошибка..') }); }; this.load=function(teamId){ var dfr = $.Deferred(); alert('посылаем запрос'); $.ajax({ url: 'load/check_production.php', success: function(response, status, jqXHR){ dfr.resolve();}, error: function(jqXHR, status, error) { dfr.reject() ; } }); return dfr; //dfr.promise(); }; this.init(); }; Также существует ряд библиотек-оберток для этого объекта, мне в свое время приглянулась JSDeferred: http://habrahabr.ru/post/108575/

Добавление комментариев через ajax

#ajax #yii

                    
Привет! Требуется реализовать добавление комментариев через ajax, и как бы с этим
все понятно, но также требуется чтобы при добавлении комментария он был виден всем
участникам дискуссии находящимся на странице поста. Есть соображения как это реализовать
?    


Ответы

Ответ 1



Так же как делают чаты ajax - через ajax сообщение, написанное вами, отправляется в базу, и через ajax получаются сообщения в главном окне. Видели как в ВК изменятся время отправки запроса (1 минуту назад, 5 минут назад и т.д.). То же самое надо сделать и вам. Просто проверяйте, допустим, каждую секунду, базу данных на новые сообщения с помощью ajax

Ответ 2



Тут вроде норм описано, правда не для yii: Простая AJAX система комментариев

Ответ 3



Node.js и socket.io вам помогут. Кстати, эти технологии использованы в ВК. Правда разворачивать отдельное node.jd приложение нравится не всем, так что можно поискать что-то похожее. Создаем чат на Node.js и Socket.IO

Ответ 4



Вам нужно посмотреть в сторону реализации технологии comet на базе php и js.

суббота, 11 апреля 2020 г.

Передать массив чекбоксов в PHP-файл с помощью AJAX

#php #javascript #ajax #checkbox

                    
Форма

JS function send() { var name = $('#name').val() var surname = $('#surname').val() var id_usl = $('#id_usl').val() var srok = $('#srok').val() $.ajax({ type: "POST", url: "SendData.php", data: "name="+name+"&surname="+surname+"&id_usl="+id_usl+"&srok="+srok, success: function(html) { $("#result").empty(); $("#result").append(html); } }); } Как отправить в SendData.php массив value выделенных чекбоксов и как прочитать его в php-файле?


Ответы

Ответ 1



Воспользуйтесь методом .serialize() Например: function send() { var name = $('#name').val() var surname = $('#surname').val() var id_usl = $('#id_usl').val() var srok = $('#srok').val() $.ajax({ type: "POST", url: "SendData.php", data: {inputs: $('form').serialize()}, success: function(html) { $("#result").empty(); $("#result").append(html); } }); } Как прочесть данные? Для начала выполите: parse_str($_POST['inputs'], $inputs); Затем: print_r($inputs);

четверг, 9 апреля 2020 г.

Как получить содержимое страницы, которая грузится через AJAX?

#php #ajax #angularjs #http #парсер

                    
Получить содержимое страницы на PHP.
Раньше я делал это достаточно легко через file_get_contents( $url ). Но на одном
сайте список товаров грузится ajax-om, точнее ангуляром.
    То есть если открыть такую страницу в браузере, у вас будет крутиться лоадер
и через некоторе время появятся товары.

Функция file_get_contents( $url ) получает сырой код, то есть типа

{{tovari.name}}
Как получить обработанное( загруженное ) содержимое страницы?


Ответы

Ответ 1



Попробуйте подключиться через curl к нужной странице, должно сработать, например: $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_HEADER, false); curl_setopt($curl, CURLOPT_FAILONERROR, 1); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, false); curl_setopt($curl, CURLOPT_POST, false); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); $data = curl_exec($curl) curl_close($curl);

Ответ 2



Вам может помочь phantomjs. Через метод evaluate вы получите контекст загруженной страницы, а дальше можете либо качать всю страницу, либо весь арсенал JS селекторов у вас в руках. Пример взят с офф. сайта: var webPage = require('webpage'); var page = webPage.create(); page.open('http://m.bing.com', function(status) { var title = page.evaluate(function() { return document.title; }); console.log(title); phantom.exit(); });

Ответ 3



С помощью библиотеки CURL это возможно. Недавно сайт парсил где все на ajax и с библиотекой jQuery. Так если парсишь с помощью curl и потом выводим в браузер, то будет все криво, потому-что клиент в данный момент CURL(сервер), а не Вы. Кроссдоменный запрос не прокатит поэтому нужно взять к примеру библиотеку Simple HTMLDOM $curl = curl_init(); curl_setopt($curl, CURLOPT_FAILONERROR, 1); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // allow redirects curl_setopt($curl, CURLOPT_TIMEOUT, 10); // times out after 4s curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // return into a variable curl_setopt($curl, CURLOPT_URL, "https://ya.ru/"); curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 GTB6"); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); $data = curl_exec($curl); Выводить $data не нужно. Всё, ваш клиент (сервер) получил страницу. Теперь скачиваем http://simplehtmldom.sourceforge.net/ И есть инструкция например здесь http://zubuntu.ru/php-simple-html-dom-parser/ То есть нам нужно продолжить так: $html=str_get_html($data); $result=$html->find(div.spisok span); //получаем массив Дальше его перебираем. foreach ($result as $one){ echo $one; //можем уже выводить то, что нашли } По такому принципу ищем данные, перебираем их. Важно точно определить "координаты" данных.

Ответ 4



Ну тут же все тоже самое загружаете инструмент разработчика , в любом браузере . В хроме и ему подобных (опера , яндекс , рамблер итд) он встроеный в мозиле firebug смотрите что грузится у вас после загрузки страницы , берете этот url подставляете свои параметры и тем же file_get_contents качаете контент

Ответ 5



В хроме я использую расширение https://chrome.google.com/webstore/detail/quick-source-viewer/cfmcghennfbpmhemnnfjhkdmnbidpanb?utm_source=chrome-app-launcher-info-dialog После загрузки страницы и отработки скриптов можно посмотреть результат со всеми изменениями.

вторник, 7 апреля 2020 г.

Wordpress и AJAX - вывод массива в JSON

#php #ajax #json #wordpress #json_encode

                    
С помощью плагина добавляю в WordPress шорткод, который вставляет форму для расчета
на страничку. Серверной частью формы является вот такая функция:

    function ajax_calc(){
// Прием и обработка POST запроса   

        if(isset($_POST['action']) && $_POST['action'] == 'ajax_calc'){
//ширина, экранируем все лишнее, убираем пробелы и заменяем "," на ".", т.к. пользователь
может ввести любой из знаков
            $width      = str_replace(',','.',trim(htmlspecialchars($_POST['width'])));    
//длина                         
            $length     = str_replace(',','.',trim(htmlspecialchars($_POST['length'])));  
//высота
            $height     = str_replace(',','.',trim(htmlspecialchars($_POST['height'])));

            $m_rul      = str_replace(',','.',trim(htmlspecialchars($_POST['m_rul'])));     

            $k_zap      = str_replace(',','.',trim(htmlspecialchars($_POST['k_zap'])));

// возвратим ошибку, если пришедший к нам параметр не число 
            if(!(float)$width || $width ==''){     
                echo implode(array('loadmsgerr'=>'Error! Width should be number only!'));

            }
            elseif(!(float)$length || $length ==''){
                echo implode(array('loadmsgerr'=>'Error! Lenght should be number
only!'));

            }
            elseif(!(float)$height || $height ==''){
                echo implode(array('loadmsgerr'=>'Error! Height should be number
only!'));

            }
            else{
// иначе вернем результат       
                $Perimeter = ($width + $length) * 2 ; //периметр 
                $Square =  $Perimeter * $height;      //площадь боковых поверхностей
                                // другие вычисления, предобразования...
                                //      возвращаемы массив с данными
                $it_test = 10*$k_zap + $m_rul;
                $answers = array('S' => $Square, 'P' => $Perimeter, 'it_test' =>
$it_test);                      
                echo json_encode($answers);
                        }
                }
        }


А JS при этом вот такой:

jQuery(document).ready(function(){
// ловим клик по кнопке калькулятора 
    jQuery('#calc #form_calc_id').on('submit', function(e){
        jQuery('#calc .result').show().text(ajax_calc_object.loadingmessage);//Обработка...
//AJAX запрос методом POST на указанный url. Тип данных определяем как json        
        jQuery.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_calc_object.ajaxurl,
            data: { //принимаем данные из формы в шаблоне
                'action': 'ajax_calc', //вызов нашей функции
                'width': jQuery('#calc #width').val(), 
                'length':jQuery('#calc #length').val(),
                'height': jQuery('#calc #height').val(),                            
//                'security': jQuery('#security').val()
                'm_rul': jQuery('#pa_м-в-рулоне').text(),
                'k_zap': jQuery('#pa_k-zap').text(),

            },
            success: function(data){
                var resperr = data.loadmsgerr;//получаем заначение ошибки

                if(!resperr){//если нет ошибок
                    json.parse(data);
                    jQuery('#calc .result').html(data.S + data.P); //вставляем в
тег с классом .result полученный ответ
                    jQuery('#Обои').val();
                }
                else{
                    jQuery('#calc .result').text(resperr); //или туда же выводим ошибку
                }

            },
            error: function(xhr, textStatus, errorThrown) {//обработка и вывод в
консоль ошибок
                if (xhr.status != 0) {
                    var msg = ' (' + xhr.status + ') ';
                    if (textStatus) msg += ': ' + textStatus;
                    if (xhr.status < 200) {
                        msg = 'AJAX Informational ' + msg;
                    } else if (xhr.status < 300) {
                        msg = 'AJAX Success ' + msg;
                    } else if (xhr.status < 400) {
                        msg = 'AJAX Redirection ' + msg;
                    } else if (xhr.status < 500) {
                        msg = 'AJAX Client Error' + msg;
                    } else {
                        msg = 'AJAX Server Error' + msg;
                    }
                    console.log(msg);
                } else {
                    console.log(errorThrown);
                }
            }
        });
        e.preventDefault();
    });
});


Проблема в том, что это все не выводит ничего на страничку.
В консоль пишется ошибка 


  AJAX Success  (200) : parsererror


А в переданных от функции данных я вижу строчку 


  {"S":"","P":"","it_test":"19"}0


Так вот, я подозреваю, что вся проблема именно вот в этом 0 в конце json строки.
Но вот откуда он там берется - не понимаю вообще. Может кто знаком с механизмом?
    


Ответы

Ответ 1



Чтобы не получать нуля в конце ajax-ответа, в самом конце функции ajax_calc() вызывайте wp_die()

суббота, 4 апреля 2020 г.

Отправка двух Ajax запросов

#javascript #jquery #ajax #post #get

                    
Необходимо отправить Ajax запрос и в случае успеха отправить второй с данными из первого.
Я пробовал вот так но ошибки и результат не выводит.



    


Ответы

Ответ 1



Используйте промисы, а именно чейнинг. Это идеальное решение для Вашего случая. // сделать запрос $.get('https://learn.javascript.ru/article/promise/user.json') // 1. Получить данные о пользователе в JSON и передать дальше .then(response => { console.log(response); let user = JSON.parse(response); return user; }) // 2. Получить информацию с github .then(user => { console.log(user); return httpGet(`https://api.github.com/users/${user.name}`); }) // 3. Вывести аватар на 3 секунды (можно с анимацией) .then(githubUser => { console.log(githubUser); githubUser = JSON.parse(githubUser); let img = new Image(); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.appendChild(img); setTimeout(() => img.remove(), 3000); // (*) }); При чейнинге, то есть последовательных вызовах .then…then…then, в каждый следующий then переходит результат от предыдущего.

понедельник, 30 марта 2020 г.

ajax и элементы с одинаковым классом

#php #html #jquery #ajax


Есть несколько блоков с одинаковым классом, по тыку срабатывает функция, которая
сравнивает текст блока с полем из таблицы в бд, и после выборки выводит по нему информацию.
Пока был один блок с классом, на который было наложено событие, все прекрасно отрабатывало,
добавил второй - перестало выводить что-либо. Собственно вопрос: Как нормально реализовать
это, в дальнейшем блоки буду выводить циклом?



function getDetails() {
var name = $('.catName').text();

$.ajax({
    type: 'POST',
    url: 'demo.php',
    data: {nickname:name},
    success: function (data) {
        $('.catInfo').html(data);
    }
});

}
Мурзик
Барсик


Ответы

Ответ 1



нормально реализовать это так: $(".catName").click(getDetails); function getDetails(e) { var div = this; $.ajax({ type: 'POST', url: 'demo.php', data: { nickname: $(div).text() }, success: function(data) { $(div).html(data); } }); console.log("clicked - " + $(div).text()); }
Мурзик
Барсик


Ответ 2



Вы в этой строчке получаете все элементы с селектором .catName, а это 2 элемента!, они будут склеиваться. var name = $('.catName').text();

четверг, 19 марта 2020 г.

Получение данных из URL после знака # (hash) на сервере

#url #ajax #php #сервер


Доброго времени суток Друзья! Продолжаю писать свою CMS систему, среди её "фишек"
будет функция перехода в режим "быстрой навигации".
Режим быстрой навигации, это по сути реализация системы клиент -><- сервер :

Клиент заходит на сайт, обработчик на сервере принимает запрос вида "?m:s;p:h;i:1;",
генерирует каркас(шаблон) и отдаёт.
Клиент получив каркас, отправляет новый запрос(Ajax) на сервер и заполняет принятыми
в ответ данными необходимые поля.

Слишком растянул вступление для вопроса, но хотелось бы по лучше объяснить, что же
я хочу узнать.
При переходе по следующей ссылке : mysite.ru/?m=s&p=h&i=1 сервер получит эти данные
через суперглобальный массив $_GET.
При переходе по следующей ссылке : mysite.ru/#m:s;p:h;i:1; серверу необходимо получить
данные после знака решётки(#).
Всё бы ничего, есть вариант использовать Javascript и с помощью браузера передать
эти данные на сервер, но есть одно "но", а если эту ссылку открыл не браузер, а например
поисковый робот?
И тут собственно возникает вопрос :
Как на сервере только средствами PHP получить данные из URL после знака решётки(#) ?
Использовать функцию parse_url() можно, но она позволяет обработать строку запроса,
а не получить её.
В интернете по этому поводу мало информации, а где то ещё и видел, что средствами
только PHP сделать этого нельзя.
Есть сервис от Яндекс, Яндекс.Музыка, там реализовано аналогичное.
Хочу дополнить свой вопрос :
А можно ли с помощью Javascript превращать текущий URL в URL вида "?m:h;......."
при этом не переходя на него, хотелось бы как то всётаки реализовать такую совместимость
и для поисковика, и для пользователя, который захочет взять ссылку себе на заметку.    


Ответы

Ответ 1



Судя по всему такое всё-таки невозможно. Понимаю, меня тоже такой ответ не устраивает, но был опыт поиска решения. Сервер просто не получает хэш. Так что только яваскриптом его отдельно отправлять. Для поисковых роботов и прочих безяваскриптовых существ должны быть адреса вида mysite.ru/m:s;p:h;i:1;, по которым доступна та же самая информация без аякса.

Ответ 2



Как на сервере только средствами PHP получить данные из URL после знака решётки(#) ? Никак, якоря являются свойством локальной HTML-страницы и не передаются PHP-скрипту в любом случае.

Сохранение данных формы при уходе с сайта

#jquery #forms #ajax


Итак имеется форма заказа на сайте с большим количеством полей (уже оптимизированных
и все равно количество достаточно большое).
Задача: Когда пользователю наскучило заполнять данные, он нажимает на вкладке крестик
или закрывает браузер - сохранить все его введенные данные формы куда либо (в сессию
по средствам PHP, и похоже что это единственный доступный вариант).
Цель: После прошествия некоторого времени пользователь возвращается на сайт, открывает
форму, а у него уже форма почти заполнена теми данными которые он в прошлый раз не
дозаполнил, тем самым ускоряя весь процесс заказа продукции.
Особенности: Форма работает по средствам JQuery и отправляется на сервер AJAX запросом,
ну и соответственно заказ тем самым совершается. Браузер не кэширует такие формы, и
после перезагрузки страницы снова приходится заполнять.    


Ответы

Ответ 1



Не все браузеры поддерживают, или корректно работают с событием закрытия страницы. Но даже если вам пойдет реализовать данную "фичу" для некоторых браузеров, то на мой взгляд сделать это можно так: - сериализация формы в строку - записать массив в cookie на большой срок Тем самым когда пользователь вернутся на страницу можно восстановить данные из cookie. При использовании jquery используйте serialize(); Реализация представленная пользователем @knes, поможет обойтись Вам без события закрытия страницы.

Ответ 2



Используйте COOKIES с "бесконечным" временем хранения. Других надежных способов ДО авторизации сохранять форму нет. Сохранение при потере фокуса с любого поля. $("input").blur(function(){/*Saving to cookies*/});

Как послать JSON в теле HTTP-ответа?

#c_sharp #openlayers #json #http #ajax


Отдается JSON так:

HttpListener listener = new HttpListener();
listener.Prefixes.Add(new Uri("http://localhost:8181"));
listener.Start();
while (isListening) {
  HttpListenerContext context = listener.GetContext();
  HttpListenerRequest request = context.Request;
  HttpListenerResponse response = context.Response;
  //...
  MemoryStream ms = (GeoJsonDeserialize.SerializeGeoJson(ObjToJson) as MemoryStream);
  byte[] buffer = ms.ToArray();
  response.StatusCode = (int)HttpStatusCode.OK;
  response.KeepAlive = false;
  response.ContentType = "application/json";
  response.ContentEncoding = System.Text.UTF8Encoding.UTF8;
  response.ContentLength64 = buffer.Length;
  response.AddHeader("Cache-Control", "private, max-age=0");
  Stream output = response.OutputStream;
  output.Write(buffer, 0, buffer.Length);
  ms = new MemoryStream();
  ms.Write(buffer, 0, buffer.Length);
  buffer = ms.ToArray();
  output.Close();
}

В другой проге на C# я запрашиваю так:

WebRequest webRequest = WebRequest.Create("http://localhost:8181");
WebResponse webResponse = webRequest.GetResponse();
StreamReader sr = new StreamReader(webResponse.GetResponseStream());
String str = sr.ReadToEnd();

и вижу переданный текст (JSON).
Но вот беда - ни Ajax не видит тело ответа (выдает ошибку), ни OpenLayers который
по GeoJSON должен показать точки на карте.

OpenLayers запрашивает данные (за основу взят пример OpenLayersRotationExample):
vectors = new OpenLayers.Layer.Vector( "Simple Geometry", {
  protocol: new OpenLayers.Protocol.HTTP({
    url: "http://localhost:8181",   format: new OpenLayers.Format.GeoJSON()
  }),
  strategies: [new OpenLayers.Strategy.Fixed()]
});
map.addLayers([vectors]);

Объект в JSON (GeoJSON) выглядит так:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-108.04,44.68]},"properties":{"course":184.7}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-111.04,45.68]},"properties":{"course":44.1}}]}

Специально пробовал текст передаваемого JSON загрузить в OL непосредственно в JavaScript:

var featurecollection = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-111.04,45.68]},"properties":{"course":42.9}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-111.04,45.68]},"properties":{"course":157.5}}]};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector("Simple 1", {
styleMap: new OpenLayers.StyleMap({
  "default": {
     externalGraphic: "OpenLayersRotationExample_files/marker-gold.png",
         //graphicWidth: 17,
         graphicHeight: 20,
         graphicYOffset: -19,
         rotation: "${course}",
     },
     "select": {
        cursor: "crosshair",
        externalGraphic: "OpenLayersRotationExample_files/marker.png"
     }
  })
}); 
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));

И все работает - точки отображаются.
Вывод - я неправильно отдаю JSON.
Подскажите как в ответ на запрос отдать JSON что бы JavaScript его смог принять?    


Ответы

Ответ 1



Поскольку провайдер точек и страница отображающая карту находится в разных доменах, действует Same Orign Policy. В OpenLayers есть OpenLayers.Protocol.Script который использует JSONP для получения данных. По умолчанию callback называется OpenLayers.Protocol.Script.registry.c1. Вам необходимо переделать провайдер соответствующим образом, чтобы он оборачивал результирующий JSON в эту функцию.

вторник, 17 марта 2020 г.

Как в JS вставить разметку HTML?

#jquery #ajax #javascript


Всем привет.
Подскажите, как в JS вставить HTML блок с содержимым?
Например:
Текст текст
Текст текст
Так оно почему-то не работает, а как правильно, чтобы потом подключил этот файл и оно читало разметку?


Ответы

Ответ 1



http://jsfiddle.net/aqjLk2yk/ http://jquery-docs.ru/attributes/html/ http://jquery-docs.ru/attributes/text/

Ответ 2



Надо значение этой переменной as как-то вставить в нужном месте документа. Например, если там есть пустой
с известным id, то можно так (пример 1): document.getElementById("mesto").innerHTML = as; Или можно, например, в конец документа, или известного элемента, добавить свежесозданный
с вашим html (пример 2): var div = document.createElement("DIV"); div.innerHTML = as; document.getElementsByTagName('body')[0].appendChild(div); jQuery облегчает эту же задачу. Те же два способа будут выглядеть по одной строке: $("#mesto").html(as); // в элемент с id="mesto" // или $("body").append(as); // в конец документа, не оборачивая в доп. div Если HTML много, в несколько строк, можно его обернуть в отдельный тег с id:

Ответ 3



Текст текст
Текст текст


воскресенье, 15 марта 2020 г.

Как сохранять изображения в localStorage?

#javascript #html #jquery #ajax #localstorage


Есть браузерное  приложение (не сайт), для которого нужна такая функция, как cохранять
изображение с удаленного url в localStorage. Для того, что бы потом можно выводить
в тело dom из локлаьного хранилище . Кто уже такое практиковал поделитесь советом как
это реализовать?
    


Ответы

Ответ 1



Вам понадобится преобразование изображения в Base64: function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); } Теперь вы можете получить изображение из DOM (допустим в целях кэширования), преобразовать его в Base64 и сохранить в localStorage: var image = document.getElementById('imageId'); var b64image = getBase64Image(image); localStorage.setItem('imageIdCached', b64image); Как использовать такое изображение? var dataImage = localStorage.getItem('imageIdCached'); bannerImg = document.getElementById('tableBanner'); bannerImg.src = "data:image/png;base64," + dataImage;

воскресенье, 8 марта 2020 г.

Как сделать простой сервер на Python работающий как автономно, так и через apache?

#python #ajax #apache


Необходимо создать простой одностраничный сайт для тестовых целей. На странице необходимо
иметь возможность делать AJAX запросы к серверу. Пожалуйста, подскажите, каким образом
реализовать самым простым и быстрым способом инфраструктуру сервера? Необходимо учитывать,
что сервер будет запускаться как на локальной машине не техническим специалистом, так
и на общем тестовом сервере. На локальной машине не технического специалиста нет какого–либо
специального ПО. На сервере используется apache2, а также настроено окружение для django–проектов.
    


Ответы

Ответ 1



Самым простым способом реализовать указанное будет использование встроенного python HTTP–сервера на локальной машине и простого WSGI–приложения на сервере. При создании структуры проекта необходимо учитывать, что при работе через WSGI статические файлы лучше отдавать напрямую через apache. Предлагаемая структура проекта будет следующей server.py static/ | - index.html | - m/ | - styles.css | - scripts.js | - img/ В этом случае, мы сможем одинаково работать с файлами проекта. В html/css коде ссылки на статические файлы будут выглядеть следующим образом /m/scripts.js Конфигурация apache ServerAdmin webmaster@mysite.ru DocumentRoot "/path/to/my/site/root/" ServerName mysite.ru WSGIApplicationGroup %{GLOBAL} WSGIDaemonProcess mysite WSGIProcessGroup mysite WSGIScriptAlias / /path/to/my/site/root/server.py Alias /m/ /path/to/my/site/root/static/m/ Order deny,allow Allow from all ErrorLog "/var/log/apache2/mysite_error.log" LogLevel warn CustomLog "/var/log/apache2/mysite_warning.log" combined В конфигурационном файле для сервера мы казали, где находится наш WSGI скрипт (WSGIScriptAlias / /path/to/my/site/root/server.py). Предлагается использовать тот же скрипт и для локального сервера. Также мы добавили псевдоним для /m/ (Alias /m/ /path/to/my/site/root/static/m/). Таким образом, все что остается – сделать папку static рабочей директорией для локального сервера, а apache автоматически сам будет обрабатывать ссылки на файлы. import SimpleHTTPServer import SocketServer import os import sys PORT = 8000 AJAX_ENPOINT_URL = "/ajax/endpoint" DOCUMENT_ROOT = "/path/to/my/site/root/" # Обработчик локального сервера. class CustomHandler(SimpleHTTPServer.SimpleHTTPRequestHandler): # Обрабатываем GET–запрос к серверу. # Если запрос к приходит по известному нам URL, формируем ответ. # Если мы не знаем URL, предлагаем стандартной библиотеки обработать его. def do_GET(self): if self.path == AJAX_ENPOINT_URL: self.send_response(200) self.send_header('Content-type','application/json') self.end_headers() self.wfile.write("My ajax response") return else: SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self) if __name__ == "__main__": os.chdir("./static/") httpd = SocketServer.TCPServer(("", PORT), CustomHandler) print "Serving at port", PORT httpd.serve_forever() quit() def get_index(): f = open(DOCUMENT_ROOT +'/static/index.html', 'r') data = f.read() f.close() return data def application(environ, start_response): output = "" status = "200 OK" content_type = "text/plain" path = environ.get('PATH_INFO', None) if path == "/" or path == "index.html": output = get_index() content_type = 'text/html' elif path == AJAX_ENPOINT_URL: content_type = 'application/json' output = "My Ajax response" if output == "": status = "404 Not Found" output = "Not Found" response_headers = [('Content-type', content_type), ('Content-Length', str(len(output)))] start_response(status, response_headers) return [output] Для запуска сервера на локальной машине, достаточно перейти в корень проекта и выполнить команду python server.py В случае запуска на сервер, необходимо добавить конфигурацию apache в папку конфигураций и перезапустить его.

суббота, 7 марта 2020 г.

Прелоадер при отправке формы

#php #javascript #jquery #ajax


Добрый день, есть универсальная форма обратной связи, работает вот с этим скриптом:

$("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      location="http://mysite.com/thankyou.html";
    });
    return false;
  });`


После отправки формы происходит переадресация на страницу "спасибо". Иногда отправка
формы занимает до 5 секунд, иногда сразу отправляется. И вот когда форма "тормозит",
хочется нажать на кнопку "еще". Помогите сделать прелоадер. То есть, чтобы после нажатия
на кнопку "отправить", в стиле этой кнопки появлялся прелоадер с анимацией. Тогда пользователю
будет понятно, что что-то происходит и не будет повторных нажатий.
    


Ответы

Ответ 1



Сделайте проще - используйте атрибут disabled, дабы пользователь видел сереющую кнопку и не только понимал, что никуда жать не надо, но и не мог нажать даже при очень большом желании. Собственно, можно изменять этот атрибут не только у кнопки отправки формы, но и у всей формы. Тогда вам будет достаточно прописать css-правила для элементов формы, которые будут изменять форму, и всем все будет понятно. Впрочем, скорее всего и без особых правил вас вполне устроит вид элементов формы, у которой установлен этот атрибут. Задизаблить все элементы ввода на форме можно примерно так: f.find(':input').attr("disabled", true); Где f - это указатель на вашу форму, если вы используете JQuery (а вы его используете). Отдельно кнопку, понятное дело, примерно так: b.attr("disabled", true); Можете, конечно, сделать и прелоадер, но проблем с ним огребете гораздо больше - нужно будет отдельно сделать его дизайн, потом отдельно сделать его для мобильных версий, потом окажется, что где-то он выглядит совсем не так, и не закрывает собой нужные элементы, и вы на всякий случай все равно будете их дизейблить, в общем сплошные проблемы. Если у вас вопрос еще и в том, где разместить упомянутый выше код, то в текущих версиях библиотеки запись $.ajax()такова (я привожу свою версию прелоадера, когда просто отключаем все элементы ввода): $.ajax({ url: u, type: 'POST', data: d, success: function () { // }, beforeSend: function () { // запускаем прелоадер f.find(':input').attr("disabled", true); }, complete: function () { // останавливаем прелоадер f.find(':input').attr("disabled", false); }, error: function () { // } }); Как несложно догадаться, один код в любом случае выполнится перед запуском, второй в любом случае - по окончанию, вне зависимости от успешности выполнения ajax-запроса (ну, если только ваш код в error или success ошибку исполнения быстрее не выдаст).

пятница, 6 марта 2020 г.

Несколько вопросов по ASP.MVC и AJAX

#ajax #aspnet_mvc


Я только разбираюсь в ASP.MVC и может быть задаю глупые вопросы.
В данном случае вопросы будут не "как сделать", а "почему так происходит".
Делаю проект, суть которого заключается в том, что он обходит сайт, собирает ссылки
на его страницы и  измеряет время отклика. Потом, собранную информацию выводит в табличном
виде (пока).
Проект состоит из двух страниц. На первой - в соответствующем инпуте водится поле
и по нажатию кнопки идет переход на другой контроллер (ToolController), который  производит
замеры и выводит результаты.

Код метода первого контроллера (HomeController):

public ActionResult Submit(string Url)
{
    if (CheckUrl(Url))
    {
        ViewBag.Error = "";
        return RedirectToAction("Index", "Tool", new { Url });
    }
    else
    {
        ViewBag.Error = "Некорректный адрес!"; 
        return RedirectToAction("Index");
    }

}


Валидацию пока можно не смотреть, это буду отдельно разбираться.

Представление (фрагмент):

 @using (Html.BeginForm("Submit", "Home", FormMethod.Post))
{
    
@Html.Label("Введите адрес сайта в поле ввода и нажмите кнопку")
@Html.TextBox("Url") @ViewBag.Error
} Во ToolController есть поле private поле класса VMManager, методы которого реализуют бизнес-логику. В классе VMManager есть поле вью-модели (VM), потому что все дальнейшие действия будут крутиться вокруг один раз построенной VM (сохранение в БД - пока не реализовано). Представление выводит таблицу, состоящую из ссылок на страницы сайта (Ajax.ActionLink), по нажатию на которые должно подгружаться partialView с графическим представлением информации. До графического представления мне пока далеко, пока разобраться бы что в табличном происходит. Фрагмент контроллера (ToolController): private static VMManager manager = new VMManager(); public ToolController() { // manager = new VMManager(); } // GET: Tool public ActionResult Index(string url) { // manager = new VMManager(); manager.VM = (SiteVM)manager.GetVM(url); return View(manager.VM); } public ActionResult ShowPageResultInChart(string pattern) { if (pattern == "test") return null; Thread.Sleep(1000); return PartialView("ShowPageResultInChart"); } Фрагмент представления: @Html.Action("ShowPageResultInChart", new { pattern ="test" }) @foreach (var item in Model.PageResults) { @Ajax.ActionLink(item.PageAddress, "ShowPageResultInChart", new {pattern= item.PageAddress }, new AjaxOptions { UpdateTargetId = "ChartData", LoadingElementId = "LoadingIndicator" } ) @item.MinTime @item.AverageTime @item.MaxTime } В частичном представлении пока смотреть нечего: строчка "Сработал Ajax" Теперь вопросы: Если верить отладчику, то при первичной загрузке основной страницы запускается метод ShowPageResultInChart. Хотя он предполагался к запуску только при нажатии на Ajax.ActionLink. Почему, что я сделал не так? От этой беды я избавился условием в методе ShowPageResultInChart, но почему он срабатывает? Я правильно понимаю, что это противоречит смыслу Ajax? Разместить его ниже таблицы я не могу по условиям задания. Причем у меня сложилось впечатление, что запускается он как минимум 2 раза, но может я ошибаюсь. Судя по всему, у меня запускается несколько экземпляров второго контроллера. Это я понял по тому, что VM в процессе обнуляется и при нажатии на Ajax.ActionLink на входе метода ShowPageResultInChart VM = null. Такое впечатление, что первый экземпляр создается при выводе таблицы, второй - при нажатии на Ajax.ActionLink. От этой беды я избавился сделав поле менеджера статическим, но почему так происходит?


Ответы

Ответ 1



1) ShowPageResultInChart вы вызываете не только с помощью @Ajax.ActionLink, а также с помощью @Html.Action, отсюда он и выполняется при загрузке страницы. @Html.Action("ShowPageResultInChart", new { pattern ="test" }) 2) При каждом запросе создается отдельный экземпляр класса Controller через ControllerFactory. Обратите внимание, что Html.Action Html Helper создаст другой экземпляр контроллера. В общем, ControllerActivator.Create вызывается (для каждого запроса), чтобы создать контроллер (который создает новый контроллера или через DependencyResolver или через Activator, если не Resolver не был установлен): public IController Create(RequestContext requestContext, Type controllerType) { try { return (IController) (_resolverThunk().GetService(controllerType) ? ? Activator.CreateInstance(controllerType)); }

среда, 4 марта 2020 г.

Изменение вида продуктов через javascript

#javascript #ajax #веб_программирование #django


Задача заключается в следующем.
Нужно сделать кнопку, которая переключает вид товаров на сайте(кубиками или списком).
Из моих идей:


Через ajax посылать запрос, а в ответ получать страницу с товарами в требуемом стиле
Через js редактировать html код товаров(какой-то костыль, кажется)
Другая страница в требуемом формате(самый худший вариант, как понимаете)






Прошу помочь с этой задачей. Как ее лучше решить? Может есть более простой способ?
    


Ответы

Ответ 1



В данном случае стоит просто манипулировать стилями: var products = document.getElementById('products'); document.getElementById('grid').addEventListener('click', function(){ products.classList.add('grid'); }); document.getElementById('list').addEventListener('click', function(){ products.classList.remove('grid'); }); .product { background: #CCC; width: 100%; height: 50px; border: 1px solid #FFF; box-sizing: border-box; float: left; } .grid .product { width: 50%; }


Ответ 2



А в чем, собственно, заключается костыльность второго варианта? Ставите две кнопки, которые будут переключать стили у блоков товара. И делаете количество выдаваемых единиц кратное количеству столбцов при изменении на "сетку". Насколько я знаю, таким способом пользуются все популярные торговые площадки.

чем отличается Request Payload от FormData в js

#javascript #ajax


Чем отличается код ajax запроса на сайт FormData от Request Payload?

больше интересует второй вариант.
    


Ответы

Ответ 1



Request Payload - это любые данные, отправленные в теле запроса. А FormData - это определённый формат (content-type) передачи данных, а именно multipart/form-data. Также возможны форматы application/json, application/x-www-form-urlencoded и другие.

Ответ 2



пример Request Payload var r ={n:22,k:5}; var s={ r:r, b:1, a:25 } ....... xhr_send.setRequestHeader('accept', 'application/json'); xhr_send.setRequestHeader('content-type', 'application/json'); ....... xhr_send.send(JSON.stringify(s));

понедельник, 2 марта 2020 г.

При отправке формы с использованием ajax перезагружается страница

#php #javascript #html #ajax


Здравствуйте при отправке формы с использование ajax перезагружается страница почему
так происходит подскажите ?

var inputName = document.querySelector('#name'); var inputEmail = document.querySelector('#email'); var formSend = document.querySelector('#send'); formSend.addEventListener('click', function() { var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); }); var formAjax = function(params) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(innerHTML = xhr.responseText); } } xhr.open('POST', 'mail.php'); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(params); }


Ответы

Ответ 1



Обработчик должен просигнализировать, что стандартное сабмит-поведение формы не требуется: formSend.addEventListener('click', function() { var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); return false; // !!! }); или formSend.addEventListener('click', function(event) { event.preventDefault(); // !!! var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); }); или

воскресенье, 1 марта 2020 г.

Как убрать теги из запроса ajax

#php #javascript #jquery #ajax #json


Есть ajax запрос в js файле на выполнение скрипта php. Результат выполнения нужно
вывести в консоль в виде:

Фамилия1 Имя1 Счёт1
Фамилия2 Имя2 Счёт2


Но по ходу выполнения моего кода выходит это:

Фамилия1 Имя1 Счёт1
Фамилия2 Имя2 Счёт2
Запрос ajax: var tutajax = $.ajax("dobavl.php") .done(function(data) { console.log(data); }) .fail(function() { console.log("ne ochen"); }); Код PHP: \n"; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "\t\n"; foreach ($line as $col_value) { echo "\t\t $col_value \n"; } echo "\t\n"; } echo "\n"; mysql_free_result($result); mysql_close($link); ?>


Ответы

Ответ 1



Вариант 1. Переделать код PHP, чтобы он возвращал данные в нужном формате/виде. Вариант 2. Не переделывать код PHP: var tutajax = $.ajax("dobavl.php") .done(function(data) { $(data).find("tr").each(function() { var rowValues = []; $(this).find("td").each(function(){ rowValues.push($(this).text()); }); console.log(rowValues.join(" ")); }); }) .fail(function() { console.log("ne ochen"); });

Ответ 2



Вариант 1: Можно задать порядок выборки полей в запросе: $query = 'SELECT field1, field2, field3 FROM records'; Где, field1 - имя, field2 - фамилия, field3 - целое число Тогда при выводе полей в цикле будет определяться последовательность полей так, как ты их задал в запросе Вариант 2: При выводе ассоциативного массива указывать поля: echo "\n"; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "\t\n"; echo "\t\t\n"; echo "\t\t\n"; echo "\t\t\n"; echo "\t\n"; } echo "
" . $line['field1'] . "" . $line['field2'] . "" . $line['field3'] . "
\n";

вторник, 25 февраля 2020 г.

После загрузки данных Ajax'ом отображает только последнее значение

#javascript #jquery #ajax


Есть таблица, в ней много ячеек. Хочу Ajax'ом лениво выдергивать значения из базы
и по готовности вставлять.

При первом обходе и рисовании таблицы на PHP собираю массив ID для дальнейшей отправки
Ajax'ом.

Но отображаются данные только в последней ячейке:

$(document).ready(function() {
    //console.log(array);
    var path = ''; //путь к контролеру
    for (var i = 0; i < array.length; i++) {
        var elem = array[i];
        var url = path + "ajaxAll?val=" + encodeURIComponent(elem);
        console.log(elem, url);
        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            success: function(data) {
                //alert ($id);
                document.getElementById(elem).innerHTML = data; //запись в ячейку
            }
        })
        // document.getElementById(elem).innerHTML = elem; //так нормально пишет
в нужную ячейку
    }




пример array


  ["37_2015-06-1_1_2", "38_2015-06-1_1_2", "39_2015-06-1_1_2",
  "58_2015-06-1_1_2", "62_2015-06-1_1_2", "66_2015-06-1_1_2",
  "37_2015-06-2_1_2", "38_2015-06-2_1_2", "39_2015-06-2_1_2"]


то есть ид все есть. да и document.getElementById(elem).innerHTML = elem; нормально
данные вставляет

innerHTML += записал все ответы в одну последнюю ячейку. то есть ajax запрос идет,
а вот ид он берет последний

    


Ответы

Ответ 1



Хотите я Вам фокус покажу? for (var i = 0; i < 10; i++) { var elem = i; window.setTimeout(function(){ console.log(elem) },1000); } Вы думаете данный код вернет последовательность от 0 до 9? А вот и не угадали, он вернет Вам десять раз девятку. точно так же, как ваш код вставит все данные в только в конечный elem, а не по последовательности. Это связанно с областями видимости, да данный момент возникает замыкание на внешний контекст. Спасибо @Regent за подсказку, код можно изменить так, обернув функцию и разорвав замыкание: success: (function (elem){ return function(data) { document.getElementById(elem).innerHTML = data; }})(elem)

Ответ 2



Лучше изменить метод так, чтобы он возвращал все необходимые значения сразу. 100 ajax запросов от каждого пользователя может создать значительную нагрузку для сервер. UPD: В примере elem объявлен в замыкании, после ответа сервера значение elem будет последним (т. е. elem = array[array.length - 1] для каждого ответа). Чтоб избежать этого можно использовать $.proxy ... success: $.proxy(function(data){ $(this).append(data); }, elem) ... В данном случае this будет указывать на elem