Post html code to PHP using jQuery

Question

I allow users to edit webpages using CKEditor and then save their modified HTML snippets to the server so that I can show them on subsequent page deliveries.

I'm using this code to send the HTML and a few IDs to the server:

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 );
  }
});

And on the server side I am using PHP and am doing this:

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

This works a lot of the time when non-HTML snippets are sent but does not work when something like this is sent in the content:

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

I'm really not sure what I am supposed to be doing in terms of encoding the data client-side and then decoding server-side? Also not sure if dataType: 'json' is the best thing to use here?

Why are you doing a stripslashes before json decode?

Kris Erickson
– Kris Erickson

2010-11-28 23:38:43 +00:00
Commented Nov 28, 2010 at 23:38 — Kris Erickson
– Kris Erickson, Commented Nov 28, 2010 at 23:38

T.P. · Accepted Answer · 2010-11-29 00:26:33Z

4

The dataType attribute is the expected return data type from the server-side script. Since you're using JSON.stringify call I'll assume the use of the json2.js script or similar that allows serialization of the JSON objects on the client side.

You may want to use the JavaScript escape() function on the editor1.getData() call, so it will properly escape the problem characters.

I used the following as a test and the PHP program returned the exact copy of the string literal passed to the escape function.

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'];

answered Nov 29, 2010 at 0:26

T.P.

3,0051 gold badge24 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Claridge Over a year ago

Cool thanks. Do you have any info on when to use escape() or encodeURIComponent()? And what to do in PHP when using either? There seems to be a lot of differing opinion around the web and presumably at some point the escape() function is going to convert an uploaded character that need subsequent conversion again in PHP?

T.P. Over a year ago

I believe it is case-by-case depdendent based on what is being submitted from client side. The family of functions escape(), encodeURI(), and encodeURIComponent() all cover different and overlapping subsets of character translations. I think that it is why wiki markup/markdown is so popular for client side/browser editing since their is less special character madness in general. This link has a good treatise on the various options: xkr.us/articles/javascript/encode-compare.

drewish · Accepted Answer · 2010-11-29 04:08:21Z

2

I'd suggest dropping the PHP call to stripslashes(). You shouldn't really need that. It would be helpful if you could explain what breaks with the img element.

As far as "not sure if dataType: 'json' is the best thing to use here" I'd say it should be fine. It'll handle the serialization correctly and allow you to only need to post a single value.

edited Nov 29, 2010 at 4:08

answered Nov 28, 2010 at 23:43

drewish

9,4189 gold badges42 silver badges51 bronze badges

Comments

wakurth · Accepted Answer · 2012-10-29 03:23:07Z

1

I have this same exact scenario, but I'm using YAHOO.lang.JSON.stringify(html) from http://developer.yahoo.com/yui/json/, and PHP json_decode(json) and the server side, and I can have html with any special character (e.g. !@#$%^&*()+{}:"<>?) and it stores in the database correctly and retrieves from the database by simply reversing the sequence to store the html. I don't know if this is just the power of the YUI stringify or what, but it works... I'm also not sure if there's some special set of html that it won't work with, but I haven't come across it yet.

answered Oct 29, 2012 at 3:23

wakurth

1,6441 gold badge24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Post html code to PHP using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related