Ответы пользователя по тегу JavaScript
  • Как отправить через jquery ajax, get параметры?

    powerdot
    @powerdot
    Ведущий программист
    Мои коллеги говорят все верно, разберемся еще раз с запросом к серверу (к php-файлу):

    jQuery.ajax() с GET-запросом можно заменить на jQuery.get()

    Немного простой теории:
    Когда Вы вручную пробуете организовать Get-запрос, то Вы просто в браузере запрашиваете ссылку со своими параметрами. Когда страница загрузилась - запрос к файлу выполнился.
    mysite.ru/action.php?param=value

    То есть, грубо говоря, чтобы скрипт выполнился, нужно просто запустить (задействовать) нужный файл. Что и делает Ajax. Он просто открывает (как Вы в браузере) эту страницу, но вы этого не видите.
    Причем, он делает это асинхронно (код будет работать и дальше, не ожидая ответа), для чего нужны колбеки (функции, которые выполняются после успешного/неуспешного запроса).

    Как сделать запрос?
    //В этом случае просто выполнился скрипт
    $.get('http://mysite.ru/action.php');
    
    //Параметры можно отправить как в ссылке, так и отдельно
    $.get('http://mysite.ru/action.php?param=1');
    //или
    $.get('http://mysite.ru/action.php', {param: 1});
    
    //а что на счет колбеков?
    //они нужны, чтобы выполнить какой-либо код после выполнения запроса
    //ну, например, если после успешного запроса пишется "ok" в action.php
    $.get('http://mysite.ru/action.php', {param: 1}).done(function(data){
       //data - это аргумент, в который передается содержимое страницы
       if(data=="ok"){
           alert("Сервер всем доволен")
       }
    });
    Ответ написан
    Комментировать
  • Редактирование строки?

    powerdot
    @powerdot
    Ведущий программист
    У меня получилось чуть больше, чем регулярка... Попробуйте :)

    function formatIt(s) {
      var s2 = (""+s.substr(s.length - 9)).replace(/\D/g, '');
      var m = s2.match(/^(\d{2})(\d{3})(\d{2})(\d{2})$/);
      return (!m) ? null : m[1] + " " + m[2] + "-" + m[3] + "-" + m[4];
    }
    Ответ написан
    Комментировать
  • Как сделать эффект выплывания информации?

    powerdot
    @powerdot
    Ведущий программист
    Да, я бы реализовал это через CSS (и чуть через jQuery).

    Вам нужно два стиля:
    дефолтный (изначальный)
    и измененный - как объект должен выглядеть после деформации

    Засучите рукова, нам понадобится jQuery (библиотека для JS), CSS и немного HTML.

    Структура такого блока примерно следующая:
    <!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    
    <!-- Прописываем стили -->
    <style type="text/css" media="screen">
    	/* это сам блок, в котором все хранится */
    	.block{ 
    		background: black;
    		height: 300px;
    		width: 250px;
    		overflow: hidden;
    	}
    	
    	/* это золотой блок со всем текстом */
    	.text{
    		background: gold;
    		position: relative;
    		padding: 15px;
    		font-size: 14pt;
    		height: 100%;
    		margin-top: 100%;
    		cursor: pointer;
    		transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
    	}
    	/* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
    	.text.show{margin-top: 0;}
    	
    	/* это часть золотого текста - в нем хранится остальной текст */
    	.more_text{
    		margin-top: 25px;
    		font-size: 11pt;
    	}
    </style>
    
    
    <!-- Наш HTML -->
    <div class='block'>
        <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
    </div>
    
    
    
    <script>
    	//При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
    	$('.text').click(function(){
    		$(this).toggleClass('show');
    	});
    </script>
    Ответ написан
  • Как получить данные с сервера через jquery ajax?

    powerdot
    @powerdot
    Ведущий программист
    в целом, у Вас все верно, можно ajax сократить до .get:
    $.get('testcall.php').done(function(data){
       //data - получаемая с сервера информация, парсим ее
       data = $.parseJSON(data);
       //то, что нужно сделать зависит от формата полученных данных
       //в моем случае массив может быть таким: data = ['один','два','три']
       //теперь выведем всё в виде текста в указанный div#one:
       for(int i=0; i<data.length; i++){ //если передается объект как массив
          $('#one').append(data[i]); // методом перебора всех ключей, дополняем инфомрацию в div'e
          //и добавляем перенос строчки
          $('#one').append('<br>');
       }
    })
    Ответ написан
  • Как правильно сохранить и использовать playlist для HTML5 Audio tag?

    powerdot
    @powerdot
    Ведущий программист
    1)
    Звук в html5 можно пускать не только аудио-тегом, но и объектом js.
    Например,
    <audio controls>
      <source src="audio_file.mp3" type="audio/mpeg">
    </audio>


    то же самое, что и
    <script>
    var audio = new Audio('audio_file.mp3');
    audio.play();
    </script>


    Вы можете с сервера получать ссылки на музыку, сохранять их в массив и включать по очереди.
    ну например (я использую jquery ниже):
    var my_music = new Array();
    $.post('audio_server.php').done(function(data){
       //data - это, допустим, json с сервера со списком музыки (в виде ссылок)
       my_music = $.parseJSON(data);// вот здесь и хранится список песен
       var audio = new Audio( my_music[0] ); // запускаем первый трек
       audio.play();
    });

    2)
    можно сделать счетчик кол-во проигранных мелодий, и если он достигает длины массива, запрашивать новый список.
    можно смотреть на какой позиции вы находитесь сейчас через .indexOf()
    можно удалять предыдущий проигранный элемент: delete my_music[0], если включился my_music[1]. Ну это такое себе)

    Я бы подключил jquery и audio.js - там много чего полезного)
    Ответ написан
    1 комментарий