Post html code to PHP using jQuery_问答_开发者

开发者 https://www.devze.com 2023-01-27 21:23 出处：网络

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 p开发者_开发百科age 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?

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

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.

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.