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

viplert7

viplert7

Создатель
Регистрация
10 Май 2012
Сообщения
15
Реакции
0
Есть картинка при клике на неё, данные с javascript должны попасть в php скрипт, после обработки скрипт должен отправить данные (результат) обратно в javascript, и записать в глобальную переменную, все это действия должны происходить без перезагрузки страницы. Помогите, пожалуйста, как это можно реализовать?
 
( Время + геморой + Ajax) * Еще раз время = задача решена.
по идее java передает в некий input значение, делает событие нажатой кнопки что бы запустить php и передать значение, php через ajax грузит, выдает значение, в некий див и пиздим значение.... честно говоря, что то непонятное, мего глупое ... может если взлянуть с другой стороны у не известной нам задачи есть и другие пути решения.
 
взять библиотеку 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;
 
Если я выношу строчку вывод результата (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

А но не присваивает в глобальную переменную?
 
потому что там асинхронный аякс, данные будут только тогда, когда получит от сервера, а когда получит тогда запустится функция .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>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху