2010-11-28 12 views
3

Je permets aux utilisateurs de modifier des pages Web à l'aide de CKEditor, puis d'enregistrer leurs extraits HTML modifiés sur le serveur afin de pouvoir les afficher lors des livraisons de pages suivantes.Publication du code html en PHP à l'aide de jQuery

J'utilise ce code pour envoyer le code HTML et quelques ID au serveur:

var datatosend = JSON.stringify({ page: 1, block: 22, content: editor1.getData() }); 

$.ajax({ 
    url: "/ajax/fragment/", 
    type: "POST", 
    dataType: 'json',      
    data: "data=" + datatosend, 
    success: function (html) { }, 
    error: function (xhr, status, msg) { 
    alert(status + " " + msg); 
    } 
});  

Et du côté du serveur J'utilise PHP et je fais ceci:

$json = stripslashes($_POST[ "data" ]); 
    $values = json_decode($json, true);  

Cela fonctionne la plupart du temps lorsque des extraits non HTML sont envoyés mais ne fonctionne pas lorsque quelque chose comme ceci est envoyé dans le contenu:

<img alt="" src="http://one.localbiz.net/uploads/1/Dido-3_2.JPG" style="width: 173px; height: 130px;" /> 

Je ne suis pas vraiment sûr de ce que je suis censé faire en termes d'encodage du côté client de données et ensuite de décodage côté serveur? Vous ne savez pas non plus si dataType: 'json' est la meilleure chose à utiliser ici?

+1

Pourquoi faites-vous des stripslashes avant que json décode? –

Répondre

3

L'attribut dataType est le type de données de retour attendu du script côté serveur. Puisque vous utilisez l'appel JSON.stringify, je vais supposer l'utilisation du script json2.js ou similaire qui permet la sérialisation des objets JSON du côté client.

Vous pouvez utiliser la fonction d'échappement JavaScript() lors de l'appel de editor1.getData() afin d'éviter les caractères problématiques.

J'ai utilisé ce qui suit comme un test et le programme PHP a renvoyé la copie exacte du littéral chaîne transmis à la fonction d'échappement.

so.html *

<!DOCTYPE html> 
<html><head><title>SO Example</title> 
<script 
    type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"> 
</script> 
</head> 
<body> 

<script type="text/javascript"> 
    var $data = 'd=' + escape(
    '<img alt="" src="http://one.localbiz.net/uploads/1/Dido-3_2.JPG" style="width: 173px; height: 130px;" />' 
); 

    $.ajax({ 
    url:"/so.php", 
    type:"post", 
    dataType:"html", 
    data:$data, 
    success:function(obj){ 
     alert(obj); 
    } 
    }); 
</script> 
</body> 
</html> 

so.php *

<?php 
    echo $_POST['d']; 
+0

Cool merci. Avez-vous des informations sur quand utiliser escape() ou encodeURIComponent()? Et que faire en PHP lors de l'utilisation soit? Il semble y avoir beaucoup d'opinions divergentes sur le web et probablement à un certain point, la fonction escape() va convertir un caractère téléchargé qui nécessite une conversion ultérieure en PHP? –

+0

Je crois que c'est le cas par cas en fonction de ce qui est soumis par le client.La famille de fonctions escape(), encodeURI() et encodeURIComponent() couvrent toutes des sous-ensembles différents et se chevauchant de traductions de caractères. Je pense que c'est la raison pour laquelle le balisage/markdown du wiki est si populaire pour l'édition côté client/navigateur, car ils sont moins fous en général. Ce lien a un bon traité sur les différentes options: http://xkr.us/articles/javascript/encode-compare/. – JTP

2

Je suggère de supprimer l'appel PHP à stripslashes(). Tu ne devrais pas vraiment avoir besoin de ça. Il serait utile si vous pouviez expliquer ce qui casse avec l'élément img. En ce qui concerne "ne sais pas si dataType: 'json' est la meilleure chose à utiliser ici" Je dirais que ça devrait aller. Il gérera la sérialisation correctement et vous permettra de n'afficher qu'une seule valeur.

1

J'ai ce même scénario exact, mais j'utilise YAHOO.lang.JSON. stringify (html) de http://developer.yahoo.com/yui/json/, et PHP json_decode (json) et le côté serveur, et je peux avoir html avec un caractère spécial (par exemple! @ # $%^& *() + {}: "<>?) Et il stocke dans la base de données correctement et récupère de la base de données simplement en inversant la séquence pour stocker le code HTML. Je ne sais pas si c'est juste la puissance du YUI stringify ou quoi, mais ça marche ... Je ne suis pas sûr qu'il y ait un ensemble spécial de html avec lequel ça ne fonctionnera pas, mais je n'ai pas le traverser encore.