jQuery $ .post procesando la respuesta JSON

Question

Tengo problemas para descifrar cómo leer correctamente mi respuesta JSON a partir de una solicitud jQuery $ .post().

En el siguiente código de jQuery, que pueblan una serie de cadenas de elementos del DOM basado en el correspondiente "color_entry_id" que utilizo como la clave:

var image_links = {}; 
$(this).find('input[name="color_id"]').each(function() { 
    var color_entry_id = $(this).val(); 
    var image_link = $(this).parent().find('input[name="edit_image"].' + color_entry_id).val(); 
    image_links[color_entry_id] = image_link; 
}); 

Entonces hago la solicitud POST, el envío de mi serie de "image_links":

$.post(
    "test.php", 
    { id: product_id, "images[]": jQuery.makeArray(image_links) }, 
    function(data) { 
     var response = jQuery.parseJSON(data); 
     $.each(response.images, function(index, item) { 
      alert(item); 
     }); 
    } 
); 

Además, como se muestra arriba, trato de recorrer la matriz de respuesta y salida de cada elemento, lo que yo quiero ser una cadena, pero solo me dan "[object Object ] como el valor de alerta. ¡No sé cómo hacer que muestre las cuerdas que intento mostrar!

Este es el código PHP para prueba.php:

<?php 
    $product_id = $_POST['id']; 
    $images = $_POST['images']; 

    $response = array(); 
    $response['id'] = $product_id; 
    $response['images'] = $images; 

    echo json_encode($response); 
?> 

Y aquí es lo que la parte pertinente de la DOM se parece a:

<input type='hidden' value='{{ color_entry_id }}' name='color_id' /> 
<p><img src='{{ color_img_link }}' /></p> 
<p>Image Link: <input class='{{ color_entry_id }}' name='edit_image' type='text' size='150' value='{{ color_img_link }}' /></p> 
<div class='colors {{ color_entry_id }}'> 
    <div class='img_color'> 
     <a href='javascript:void' style='background:...' class='selected'></a> 
     <p>...</p> 
    </div> 
</div> 

Me pregunto si tal vez lo estoy haciendo la codificación JSON incorrectamente en el lado PHP o si simplemente estoy repitiendo incorrectamente la respuesta en jQuery. ¡¡Cualquier ayuda es muy apreciada!!

Answer 1

then..the Ok El objeto de datos que está recibiendo de la publicación es: {"id":"abc","images":[{"color123":"somelink.com\/123","color223":"somelink.com\/‌​223"}]};

Si cambia su alerta, encontrará los valores que está buscando:

$.post(
    "test.php", 
    { id: product_id, "images[]": jQuery.makeArray(image_links) }, 
    function(data) { 
     var response = jQuery.parseJSON(data); 

     var images = response.images[0]; 
     for (var i in images){ 
      alert(images[i]); 
     } 
    } 
); 

Answer 2

$ .post espera XML por defecto, es necesario que especifique el formato de respuesta

$.post(
    "test.php", 
    { id: product_id, images : jQuery.makeArray(image_links) }, 
    function(response) { 
     // Response is automatically a json object 
     for(var i = 0; i < response.images.length; i++) { 
      alert(response.images[i]); 
     } 
    }, 'json' // <-- HERE 
); 

Además, considerar la adición de una cabecera de tipo de contenido en el script php

<?php 
    header("Content-type: application/json"); // Adding a content type helps as well 
    $product_id = $_POST['id']; 
    $images = $_POST['images']; 

    $response = array(); 
    $response['id'] = $product_id; 
    $response['images'] = $images; 

    echo json_encode($response); 
    ?> 

Answer 3

Un ejemplo básico bastante sería algo así como:

$.post('test.php', {"id": 42}, function (json) { 
console.log(json); 
}, 'json'); 

ejemplo PHP

$number = rand(1,$_POST["id"]); 
return print json_encode($number);