1 Тема від savelikan

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Тема: AJAX + JQUERY + JSON

Привіт усім! Допоможіть, будь ласка, розібратися
Відправляю наступний запит:

function getquestion(next,current) { 
    jQuery.ajax({ 
        url:     "ajax.php?subj_id='.ceil($_GET['id']).'&action=" + next + "&current=" + current,
        type:     "POST",
        dataType: "html",
        data: jQuery("#"+"test_from").serialize(),  
        success: function(response) {
            document.getElementById("test_div_id").innerHTML = response; 
        }, 
        error: function(response) { //Если ошибка 
            document.getElementById("test_div_id").innerHTML = "Ошибка при отправке формы"; 
        } 
    }); 
}

одержую:

{"status":"1","text":"................."}

Як звідси одержати дані?

2 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 594
    • Репутація: 13305

Re: AJAX + JQUERY + JSON

Ви отримуєте не HTML, а JSON. Відповідно, далі треба зробити щось на кшталт

var obj = JSON.parse(response);
if( obj.status == 1 )
  document.getElementById("test_div_id").innerHTML = obj.text;
Подякували: savelikan1

koala вебсайт

3 Відповідь від mike Востаннє редагувалося mike (20.01.2015 22:50:42)

  • mike
  • mike
  • Replace Team
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 08.04.2013
  • Повідомлень: 390
    • Репутація: 310

Re: AJAX + JQUERY + JSON

ось я тут щось тестував.
в $('#test') заповнюється то що вернув сервак, аце в даному випадку HTML якщо він повертає JSON то його відповідно потрібно обробити через $.evalJSON()

var test = {
baseURL:'http://localhost/',
test:function(wait){
        
        wait = wait ? "?wait=1":'';
        var _this = this;
        $.ajax({
            url:_this.baseURL+'test.php'+wait
        }).done(function(res){
            $('#test').append(res);
        });
            
    }
};
test.test();

4 Відповідь від savelikan Востаннє редагувалося savelikan (20.01.2015 23:06:27)

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

А це допомогло)))

function getquestion(next,current) {
    $("#test_div_id").hide(500);
    $.ajax({
        url: "ajax.php?subj_id='.ceil($_GET['id']).'&action=" + next + "&current=" + current
    }).done(function(response){
        var obj = JSON.parse(response);
        var corrent_q = $("#corrent_q_num").html();
        if( obj.status == 1 ){
            $("#test_div_id").text(obj.text);
            corrent_q++;
            $("#corrent_q_num").text(corrent_q);
        } else {
            $("#test_div_id").text(obj.text);
        }
    });
}

А чи можливо зробити так, щоб спочатку було $("#test_div_id").hide(500);, потім $("#test_div_id").text("завантаження..."); а після завантаження було $("#test_div_id").show(500);?

І ще.... Якщо Json передає частину HTML коду, як можна екранувати символи, щоб все було нормально? Чи в такому випадку JSON не підійде?

5 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 594
    • Репутація: 13305

Re: AJAX + JQUERY + JSON

savelikan написав:

А чи можливо зробити так, щоб спочатку було $("#test_div_id").hide(500);, потім $("#test_div_id").text("завантаження..."); а після завантаження було $("#test_div_id").show(500);?

Можна, робіть.


savelikan написав:

І ще.... Якщо Json передає частину HTML коду, як можна екранувати символи, щоб все було нормально? Чи в такому випадку JSON не підійде?

Що для вас означає "все було нормально"? Може, вам htmlspecialchars треба?

koala вебсайт

6 Відповідь від mike

  • mike
  • mike
  • Replace Team
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 08.04.2013
  • Повідомлень: 390
    • Репутація: 310

Re: AJAX + JQUERY + JSON

savelikan написав:

І ще.... Якщо Json передає частину HTML коду, як можна екранувати символи, щоб все було нормально? Чи в такому випадку JSON не підійде?

Якщо JSON перемішку з HTML то це не спрацює, бо JSON.parse() викине ексепшин. Якщо є потреба передати і HTML і JSON то запхайте сам HTML як параметр в JSON, відповідно правильно його проекранувавши.



Але для чого так робити?

7 Відповідь від savelikan Востаннє редагувалося savelikan (21.01.2015 08:02:54)

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

muhasjo написав:

Але для чого так робити?

Та все ті тести роблю)
Тут одне питання виводиться на сторінку, а при натисканні "наступне запитання" черел скріпти підвантажується наступне запитання. В запитанні також є JS які змінюють фон відповіді залежно від того, правильна вона чи ні.
І ось, що в мене вийшло:

function getquestion(next) {
    $("#test_div_id").fadeOut(500, function(response){
        var current_q = $("#corrent_q_num").html();
        $.ajax({
            url: "ajax.php?subj_id='.ceil($_GET['id']).'&action=" + next + "&current=" + current_q
        }).done(function(response){
            var obj = JSON.parse(response);
            if( obj.status == 1 ){
                $("#test_div_id").html(obj.text);
                $("#corrent_q_num").text(obj.current);
            } else {
                $("#test_div_id").text(obj.text);
            }
        });
        $("#test_div_id").fadeIn(500);
    });
}

current_q = поточний номер запитання, береться з форми DIV, спочатку рівне 0
Ну а PHP визначає з якого запису шукати

IF($_GET['action']==1){
    $limit = ceil($_GET['current'])+1;
}elseIF($_GET['action']==2){
    $limit = ceil($_GET['current'])-1;
}

$limit - це запис, з якого почати пошук результатів: LIMIT ".$limit.", 1
Але тут є одна проблемка. Відрахування запитань та відображення результатів починається з 0
Всі спроби почати від 1 закінчуються тим, що пропускається перший результат пошуку, бо тоді зразу $limit=2
=(

Крім того, в мене ось це $(this).animate({background-color:'#ffdddd'},1000); не працює, хоча $(this).animate({height:'+=200px'},1000); працює

8 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 594
    • Репутація: 13305

Re: AJAX + JQUERY + JSON

Відрахування - це з університету. А з нуля починається відлік. І я зовсім не розумію, як саме він починається з нуля (мабуть, ваша проблема саме в тому, що ви й самі це детально не продумали) - давайте по кроках:
1. В #corrent_q_num знаходиться 0.
2. Користувач тицяє next.
3. На сервер летить ajax action=" + next + "&current=" + current_q, тобто action=1&current=0
4. На сервері формується запит із $limit = 1, тобто "...LIMIT $limit, 1..."
5. Сервер повертає json із current = $limit, тобто current = 1
Все правильно? Чи щось в цьому ланцюжку працює не так?

koala вебсайт

9 Відповідь від savelikan

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

Так, все правильно. От тільки  current_q_num береться з div, який відображається користувачам як номер поточного запитання. Тобто 0 - на одиницю менше від того, що мало б відображатися. Чи можливо треба використати два лічильника?

10 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 594
    • Репутація: 13305

Re: AJAX + JQUERY + JSON

Ну то виводьте current+1, а в запиті робіть current-1. Чи навіть залиште це +1-1 серверу, хай JavaScript тільки з користувацьким представленням працює.

koala вебсайт

11 Відповідь від savelikan

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

Дякую, я спробую)

А тут в чому може бути помилка?
$(this).animate({background-color:'#ffdddd'},1000);

12 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 594
    • Репутація: 13305

Re: AJAX + JQUERY + JSON

savelikan написав:

Дякую, я спробую)

А тут в чому може бути помилка?
$(this).animate({background-color:'#ffdddd'},1000);

Це головоломка така?
Ну, наприклад, в тому, що це знаходиться за межами тегу script чи обробника події.
А якщо в цьому Є помилка, то, будь ласка, описуйте, що саме відбувається, а не загадки загадуйте.

koala вебсайт

13 Відповідь від savelikan Востаннє редагувалося savelikan (21.01.2015 15:06:40)

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

Прошу вибачення, що стільки питань, я тільки починаю освоювати JQuery
Ось так в мене будується один з варіантів відповідей у тесті:

$answers = explode("\r\n",$TSTquestions['krok_questions-answers']);
$answers = shuffle_assoc($answers);
FOREACH($answers AS $key => $value){
        IF($answers[$key][0]=="=")
        {
            $anstemp = substr($answers[$key],1);
            $background = '#32CD32';
        }else{
            $anstemp = $answers[$key];
            $background = '#FA8072';
        }
        $CONTENT .= '
        <LABEL CLASS="krok_answer">
            <DIV
                ID="'.$key.'"
                CLASS="new_answer" 
                OnClick="
                    if(document.getElementById(\'prew\').value != 0) {
                        document.getElementById(document.getElementById(\'prew\').value).style.background= \'#FFFFFF\'
                    }
                    this.style.background= \''.$background.'\';
                    document.getElementById(\'prew\').value = \''.$key.'\';
                "
                onmouseover="
                    if(document.getElementById(\'prew\').value != \''.$key.'\') {
                        this.style.background= \'#E6E6FA\';
                    }
                "
                onmouseout="
                    if(document.getElementById(\'prew\').value != \''.$key.'\') {
                        this.style.background= \'#FFFFFF\';
                    }
                "
            >
                <INPUT
                    STYLE="display:none;"
                    TYPE="radio"
                    NAME="answer'.$TSTquestions['krok_questions-id'].'"
                    VALUE="'.$key.'"
                >
                '.$anstemp.'
            </DIV>
        </LABEL>
        
        ';
}
$CONTENT .= '<INPUT TYPE="hidden" ID="prew" VALUE="0">';

В $answers містяться варіанти відповіді, кожен в окремому рядочку, вірна відповідь спочатку позначена символом "=".
Тут працює JavaScript. При натисканні на LABEL в prew записуться номер відповіді та вона виділяється. При виборі іншої відповіді, ми її виділяємо, а з prew береться інформація про те, з якої відповіді потрібно зняти виділення. Може це все зроблено не зовсім логічно і є можливість організувати це простіше на JQuery?
Просто я хотів би написати це саме на JQuery, щоб відповідь виділялася плавно.

Едіт: функція shuffle_assoc перемішує масив зі збереженням ключів. Зараз це не потрібна функція, можна перемішати просто випадково - це залишилося ще з минулої версії коду)

14 Відповідь від savelikan

  • savelikan
  • Користувач
  • Поза форумом
  • Звідки: Тернопіль
  • Дата реєстрації: 21.12.2014
  • Повідомлень: 99
    • Репутація: 4

Re: AJAX + JQUERY + JSON

Мені бажано хоча б знати як зробити ось це "this.style.background= \''.$background.'\';" на JQuery плавно