Как вернуть значения из вызова ajax вместе с результатом HTML?

Question

У меня есть JQuery код как

 $(function() {
    $("#addline").click(function() {
        $.ajax({
            type: "POST",
            url: "proc/add-line.php",
            data: // some string,
            cache: false,
            success: function(html){
                $("ul#nextLines").append(html);

                if(lineId == 10) {                // lineId value to be passed from add-line.php
                    $("#addForm").hide();
                }
            }
        });
        }return false;
    }); 
});

В строке, отмеченной как "// lineId для передачи из add-line.php" [см. Код выше], я хочу, чтобы страница обработки php add-line.php передавала значение var lineId.

В настоящее время add-line.php выдает HTML-код <li><?php echo $line; ?></li>. Наряду с этим я хочу отправить значение lineId, чтобы я мог реализовать это условие.

Итак, как мне отправить, а затем получить значение lineId (полученное в виде переменной PHP) из add-line.php ??

Обновление

Я внес изменения в мой код выше как

$.ajax({
                type: "POST",
                url: "proc/add-line.php",
                data: dataString,
                dataType: 'json',
                cache: false,
                success: function(data){
                    alert(data.html);
                    $("ul#nextLines").append(data.html);
                    $("ul#nextLines li:last").fadeIn("slow");
                    $("#flash").hide();

                    if(data.lineId == 10) {
                        $("#addForm").hide();
                    }
                }

            });

И PHP-код

    // Header type
    header('Content-Type: application/json; charset=utf-8');
    $data = array(
        "html"=> "test",
        "lineId" => "1" 
    );

    echo json_encode($data);

Мне не удалось получить JSON. (даже alert(data.html) в вызове функции успеха не отображается).

Можете ли вы помочь мне понять это ?? Спасибо.

Answer 1

Один из вариантов будет возвращать JSON с json_encode:

$data = array('html'=> "<li>$line</li>",
    'lineId' => $lineId //wherever that comes from
);

echo json_encode($data);

JavaScript:

$.ajax({
        type: "POST",
        url: "proc/add-line.php",
        data: // some string,
        dataType: 'json',
        cache: false,
        success: function(data){
            $("ul#nextLines").append(data.html);

            if(data.lineId == 10) {
                $("#addForm").hide();
            }
        }
});

Answer 2

Два решения:

Либо верните JSON из вашего PHP-скрипта:

// In PHP:
header('Content-Type: application/json; charset=utf-8');
echo json_encode(array(
    'html' => '<li>' . intval($lineId) . '</li>',
    'lineId' => $lineId,
));

// In JS:
success: function(json){
    var lineId = json.lineId;
    var html = json.html;
    // ...
}

Поскольку заголовок Content-Type установлен на application / json, jQuery автоматически проанализирует результат какJSON.Таким образом, первым параметром обратного вызова success является проанализированный объект JSON.

Или верните lineId в заголовке HTTP:

// In PHP
header('X-LineId: ' . $lineId);

// In JS
success: function(html, textStatus, xhr){
    var lineId = xhr.getResponseHeader('X-LineId');
    // ...
}