Помогите с решением задачи на javascript

Тема в разделе "JavaScript", создана пользователем viplert7, 16 май 2012.

Модераторы: ZiX
  1. viplert7

    viplert7 Создатель

    Регистр.:
    10 май 2012
    Сообщения:
    15
    Симпатии:
    0
    Есть картинка при клике на неё, данные с javascript должны попасть в php скрипт, после обработки скрипт должен отправить данные (результат) обратно в javascript, и записать в глобальную переменную, все это действия должны происходить без перезагрузки страницы. Помогите, пожалуйста, как это можно реализовать?
     
  2. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    ( Время + геморой + Ajax) * Еще раз время = задача решена.
    по идее java передает в некий input значение, делает событие нажатой кнопки что бы запустить php и передать значение, php через ajax грузит, выдает значение, в некий див и пиздим значение.... честно говоря, что то непонятное, мего глупое ... может если взлянуть с другой стороны у не известной нам задачи есть и другие пути решения.
     
  3. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    взять библиотеку jquery с ней отследить клик и отослать на php скрипт, например html:
    HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Кий-я-я-якс</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
     
    var global_var = 5;
     
    $(document).ready(function(){
        //функция загрузки данных из php через аякс
        function loader(id){
            $.ajax({
                //ссылка на php файл на том же домене
                url: "ajax.php",
                //тип отправки данных GET
                type:"GET",
                //отправляем переменную id, тоже самое ajax.php?id=
                data: {"id":id}
            }).done(function(data){
                //изменяем глобальную переменную
                global_var = data;
                //отоброжаем новые данные глобальной переменной
                alert(global_var);
            });
        }
        //отлавливаем клики на элементе с id="img"
        $("#img").click(function(){
            //запускаем функцию загрузки
            loader(global_var);
        });
       
    });   
    </script>
    </head>
    <body>
        <img id="img" src="http://www.google.ru/images/google_favicon_128.png" />
    </body>
    </html>
    
    и ajax.php файл:
    PHP:
    <?
    $id intval($_GET['id']);
    echo 
    $id+1;
     
  4. viplert7

    viplert7 Создатель

    Регистр.:
    10 май 2012
    Сообщения:
    15
    Симпатии:
    0
    Если я выношу строчку вывод результата (alert(global_var);) в конец функции loader(), то выводт 5 а не 6
    Вот так:

    Код:
    unction loader(id){
            $.ajax({
                //ссылка на php файл на том же домене
                url: "ajax.php",
                //тип отправки данных GET
                type:"GET",
                //отправляем переменную id, тоже самое ajax.php?id=
                data: {"id":id}
            }).done(function(data){
                //изменяем глобальную переменную
                global_var = data;
                //отоброжаем новые данные глобальной переменной
            });
            alert(global_var);
        }
    Результат: 5

    А но не присваивает в глобальную переменную?
     
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    потому что там асинхронный аякс, данные будут только тогда, когда получит от сервера, а когда получит тогда запустится функция .done(function(data){...
    а в любом другом месте нет смысла, например если вынести в конец функции loader то, будет так
    запрос отправлен на сервер,
    ожидание ответа, при получении ответа запустить .done(function(data){...
    дальше продолжается скрипт (хотя ответ может быть и не получен ещё) запускается alert(global_var), получится если ответ от сервера ещё не получен то выводит старое значение, если ответ получен то новое, такая лотерея получается. Так что обработку с новым значением надо делать после получения данных в .done(function(data){...
    Вынести можно например в отдельную функцию
    Код:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Кий-я-я-якс</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
     
    var global_var = 5;
     
    $(document).ready(function(){
        //функция загрузки данных из php через аякс
        function loader(id){
            $.ajax({
                //ссылка на php файл на том же домене
                url: "ajax.php",
                //тип отправки данных GET
                type:"GET",
                //отправляем переменную id, тоже самое ajax.php?id=
                data: {"id":id}
            }).done(function(data){
                //запускаем функция обновления
                update(data)
            });
        }
        //отлавливаем клики на элементе с id="img"
        $("#img").click(function(){
            //запускаем функцию загрузки
            loader(global_var);
        });
       
        //функция обработки полученных данных
        function update(data){
            //изменяем глобальную переменную
            global_var = data;
            //отоброжаем новые данные глобальной переменной
            alert(global_var);
        }
       
    });   
    </script>
    </head>
    <body>
        <img id="img" src="http://www.google.ru/images/google_favicon_128.png" />
    </body>
    </html>