DIV no se rellena por la solicitud AJAX

Question

Estoy tratando de hacer una llamada AJAX con jQuery, parece estar funcionando, pero no puedo entenderlo para rellenar el div.

heres el código JS:

            <script> 
                $(document).ready(function(){
                    $(document).on('change', '#flip-1', function(){    
                        var datastring = $("#some-form").serialize();
                        $.ajax
                        ({
                            type: "POST",
                            url: "test.php",
                            data:  datastring,
                            dataType: 'html',
                            complete: function(data) {
                                $('#results').html (data);
                                }
                            });
                        });
                    });
            </script>
            <form id="some-form">
                <label for="flip-1">Flip toggle switch:</label>
                <select id="flip-1" name="flip-1" data-role="flipswitch">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>
            </form>

<div id="results">Loading users...</div>

y aquí está el código PHP:

<?php

if ($_POST['flip-1'] == 'on') {
    echo 'oh is on!';
} elseif ($_POST['flip-1'] == 'off') {
    echo 'no, its not on';
}
?>      

Esto es lo que dice el depurador "del elemento de inspección" cromado "sobre los encabezados:

Request URL:http://localhost/smart_home/test.php
Request Method:POST
Status Code:200 OK

Request Headers
POST /smart_home/test.php HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 9
Accept: text/html, */*; q=0.01
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost/smart_home/index.php
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4

Form Data
flip-1=on

Response Headers
HTTP/1.1 200 OK
Date: Thu, 27 Feb 2014 20:58:08 GMT
Server: Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6
X-Powered-By: PHP/5.5.6
Content-Length: 20
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html

y esto es lo que dice la pestaña Respuesta: Cuando el botón cambia a la posición ON:

oh is on!      

cuando se cambia a "OFF"

no, its not on      

¿Alguien tiene alguna idea?

¡Gracias!

Answer 1

La devolución de llamada de complete no recibe los datos de respuesta directamente (el primer parámetro es un jqXHR objeto).En general, es más sencillo usar la devolución de devoluciones de llamada de success o .done():

$.ajax({
    type: "POST",
    url: "test.php",
    data: datastring,
    dataType: 'html',
    success: function (data) {
        $('#results').html(data);
    }
});

o

$.ajax({
    type: "POST",
    url: "test.php",
    data: datastring,
    dataType: 'html'
}).done(function (data) {
    $('#results').html(data);
});

Consulte http://api.jquery.com/jquery.ajax/