[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: JSON: jQuery+PHP
Chaosito
Добрый вечер форумчане. Уже несколько дней выношу себе мозг по поводу такой передачи данных.

Задача:
Передать данные с хтмл файла (jQuery+JSON) в php файл, обработать и обратно передать в хтмл документ(PHP+JSON).

И так:
index.html (Все в куче, CSS+JS+HTML для удобного размещения на форуме)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
JSON</title>
<script
type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style
type="text/css">
#button{border: 0px; background-color: #11cff7; height: 22px;}
#button:hover{background-color: #063b46; color: #fff;}
</style>
<script
type="text/javascript">
function
json()
{
var val; // Переменная для хранения строки

$('#md5').each(function(){ // Получаем строку для шифрования
val=this.value
});

if(val == '') { //Проверка заполнил ли пользователь поле для ввода текста
$('#notice').html('Нужно ввести строку!'); // Если нет то выводим предупреждение
}
else {
$('#notice').empty();

// Отправляем json запрос
alert('Передаем данные в скрипт');
$.getJSON("http://test/json/json.php", {v: val}, function(obj){
alert('Данные вернулись');
$('#md5').attr('value',obj.orig+'|'+obj.md5);
});
}
}

</script>
</head>
<body>
<div
align="center" style="margin-top: 20%">
<h2>
Шифрование строки:</h2>
<input
type="text" name="md5" id="md5" size="50"> <br/>
<div
id="notice"></div> <br/>
<input
type="button" value="Пуск" id="button" onclick="json()">
</div>
</body>
</html>



json.php

<?php
if(isset($_REQUEST['v'])) {
$md5 = md5($_REQUEST['v']);
$resp = json_encode(array('orig' => $_REQUEST['v'], 'md5' => $md5));
die($resp);
}
?>
Так вот, если все это дело запускать из под сервера, т.е. http://test/json/index.html то все непременно будет работать, данные отправятся, обработаются и прийдут обратно, но если запускать html файл (статично) то данные отправляются, обрабатываются но не приходят в html файл. Казалось бы это из-за того что хтмл файл не обрабатывается апачем, но не в этом дело, обрабатывать там нечего чистый хтмл и яваскрипт.
Тем более что есть следующий пример с официального источника о jQuery, где все прекрасно работает:


<html>
<head>
<script
src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any& format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
});
</script>

<style>
img{ height: 100px; float: left; }</style>
</head>
<body>
<div
id="images">
</div>
<div
id="list"></div>
</body>

</html>
Скрипт обращается к странице на фликре парсит ее и подгружает картинки вне зависимости от того выдана данная страница сервером или нет.

Следовательно пришел к выводу что я как-то неправильно отправляю данные из php.

У кого какие мысли? Как победить проблемку?



Спустя 14 минут, 10 секунд (10.11.2011 - 18:00) redreem написал(а):
ajax методы не работают с "не родным" доменом. в случае статичного запуска html - получается другой хост хранения.

Спустя 1 минута, 51 секунда (10.11.2011 - 18:02) Chaosito написал(а):
redreem А почему работает пример с фликр'ом?

Спустя 24 минуты (10.11.2011 - 18:26) redreem написал(а):
что такое "фликр"?
а, понял

Спустя 6 минут, 55 секунд (10.11.2011 - 18:33) redreem написал(а):
в примере с фликром скрипт ничего не передает серверу. возможно такое является допустимым.

Спустя 36 минут, 23 секунды (10.11.2011 - 19:09) Chaosito написал(а):
redreem
Пробовал так же убирать передачу параметров из своего скрипта, толку нет. Скорее всего на фликре, в его апи, как то по другому пхп передает json.

Вобщем меня это все интересовало, для того чтобы передавать и получать информацию из гаджетов Win7 через JS. Поэтому и разбираюсь со стат. запуском хмтл'a.

Спустя 27 минут, 26 секунд (10.11.2011 - 19:36) redreem написал(а):
почитай про политику безопасности в браузерах в отношении JS. jQuery - это одно, а ведь там так же используется JS со всеми огрничениями, которые эта политика накладывает. Волшебных плюшек - нет. В основе ajax-методов лежит XMLHttpRequest - что для него браузеры разрешают - так и работает.

Спустя 1 час, 4 минуты, 48 секунд (10.11.2011 - 20:41) Chaosito написал(а):
Это все конечно верно. С XMLHttpRequest'ом ковырялся когда-то, но сейчас ни к чему, ибо есть более удобная кросс-обертка jQuery.

Просто, в данный момент я немогу понять почему 2 почти идентичных кода, в одинаковых браузерах, работают по разному!? библиотека подключеная одинаковая, запросы используются одинаковые ($.getJSON).

Вот даже если сейчас в мой код, вместо урла ("http://test/json/json.php") подставить "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any& format=json&jsoncallback=?", то запрос таки выполнится успешно! вернет в обоих значения undefined, все верно, так и должно быть.

Все таки в ПЫХе до (после, во время) отправки JSON, нужно что то еще, может какие нибудь хэдеры.

Спустя 31 минута, 57 секунд (10.11.2011 - 21:13) redreem написал(а):
возможно что дело в хидерах.
если найдешь решение - отпишись - тоже интересно.

Спустя 13 дней, 10 часов, 3 минуты, 50 секунд (24.11.2011 - 07:17) Chaosito написал(а):
Решение нашел! Ура наконец то спустя 2 недели, решение найдено на буржуйском сайте. Link (англ.)

Технология кросс-доменного JSON называется JSONP, и использует специальную функцию обратного вызова (callback).

Для того чтобы вызывать пхп скрипт с другого домена, нужно после урла добавить "?callback=?".
Вместо "?" jQuery подставит какой то случайный номер. Это все я делал ничего не выходило, теперь то из за чего ничего не работало.
PHP скрипт. Для отправки данных обратно посредством JSONP. Нужно использовать такую конструкцию:

$json_data = json_encode(array('orig' => $_REQUEST['v'], 'md5' => $md5));
echo $_GET['callback'] . '(' . $json_data . ');';


PHP скрипт принимает номер передаваемый jQuery, и снова посылает его обратно с новыми данными.

Вот и все решение проблемы. Тему можно закрывать она исчерпала себя.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.