"&" character from api url not saved to mysql database

Question

I am working on an application that involves getting the entire page content from a page using javascript and dumping the html to the database.On the page I have various components that will be parsed and stored using a ajax request.I do it like this.

 function saveContent(){    
    var $getContent = $('#mainWrap').clone();
    $getContent.find('.textBox, .pictureBox').removeAttr('id');
    var saveContent  = $getContent.wrap('<div></div>').html();
    var getBodyStyle=$('body').attr('style');
    var auto="auto";
    $.ajax({
        url:"save.php",
        type:"POST",
        dataType:"text",
        data:"txtComp="+saveContent+"&auto="+auto+"&pageId="+pageId+"&webId="+webId+"&userId="+userId+"&bodyStyle="+getBodyStyle,
        success:function(data){
            var options = {"text":data,"layout":"topCenter","type":"success","animateOpen": {"opacity": "show"}};
            setTimeout(function(){noty(options)}, 1000);
            //$('#draftMsg').html(data).fadeIn(500);
        }
    }); 
 }

Now I have social media components like facebook,twitter.When I try to save the facebook component it is not save entirely as it contains some parameters that are present in the script with '&amp'.

    <div style="z-index: 1001; height: 560px; width: 413px; top: -20px; left: 121.5px;" id="com-IADDFSGNHLU7WNR3WM2KC3I8DA2DOIC6" class="facebookBox contentBox boxStyle">
    <div class="blankDiv"></div>
    <iframe class="facebookBoxObject" allowtransparency="true" style="border: medium none; overflow: hidden; height: 560px; width: 413px;" src="https://www.facebook.com/plugins/likebox.php?api_key=117096311791424&amp;locale=en_US&amp;height=560&amp;header=true&amp;show_faces=true&amp;stream=true&amp;width=413&amp;href=http://www.facebook.com/cbil360" frameborder="0" scrolling="no">
    </iframe>
   </div>

The above is the content I want to store to the database and I get it when I say console.log but in the database it stores only the below content

 <div style="z-index: 1001; height: 388px; width: 283px; top: -20px; left: 120.5px;" id="com-IADDFSGNHLU7WNR3WM2KC3I8DA2DOIC6" class="facebookBox contentBox boxStyle">
    <div class="blankDiv"></div><iframe class="facebookBoxObject" allowtransparency="true" style="border: medium none; overflow: hidden; height: 388px; width: 283px;" src="https://www.facebook.com/plugins/likebox.php?api_key=117096311791424

It breaks after the api_key parameter as it has & after that.I am not asure as I don't get any error for this.Tried to debug but,not to a conclusion yet. Please correct where am I going wrong.

Update: The query I am using is

$query = "insert into tbl_revision (userId,revisionContent,webId,pageId,status,saveType,dateAdded) values ('".$_SESSION['UserId']."','$revisionContent','$webId','$pageId','$status','$saveType','$toDate')"

Can you post your PHP? I'm guessing it has to do with your query or method of executing the query. — thatthatisis, Feb 28 '13 at 07:48
You don't escape the GET parameters. Perhaps you should. The fact the content is terminated at the & indicates that. — John Dvorak, Feb 28 '13 at 07:54
I have updated the question with the query.I think the query is right as I can save rest of the components.The field in the database is marked as `varchar` if that might make a difference. — KillABug, Feb 28 '13 at 07:58
Try changing the `data` field in your ajax call to use json format. eg: data: `{txtComp: saveContent, auto: auto, pageId: pageId}` — dlock, Feb 28 '13 at 07:58
@JanDvorak by escape do yu mean I need to do `mysql_real_escape_strings`? — KillABug, Feb 28 '13 at 07:59

score 1 · Answer 1 · answered Feb 28 '13 at 07:58

1

Have you tried to encoded the input string and decoded the output string with htmlentities and html_entity_decode?

answered Feb 28 '13 at 07:58

Razorphyn

1,314
13
37

score 1 · Accepted Answer · edited May 23 '17 at 11:57

I really doubt that the problem is happening before the data reaches your backend. It's happening on the front end because you are including a & as a normal character in your query string which causes some confusion. What I recommend is either you URL encode your saveContent variable (URL encode not HTML encode).

encodeURIComponent(saveContent) //that will replace the & with it's corresponding url encoding

There is also another workaround, you could submit the ajax request fields using the json form provided by jquery $.ajax. An example of that would be

 $.ajax({
        url:"save.php",
        type:"POST",
        dataType:"text",
        data:{txtComp: saveContent, auto: auto }, //etc
        success:function(data){
            var options = {"text":data,"layout":"topCenter","type":"success","animateOpen": {"opacity": "show"}};
            setTimeout(function(){noty(options)}, 1000);
            //$('#draftMsg').html(data).fadeIn(500);
        }
    });

I also recommend that you have a look on that question to know the difference betweeen URL Encoding and HTML Encoding

Difference between Url Encode and HTML encode

The json part solved the issue.Will definitely have a look at the question. **One question** How does sending as json solve issue?Does normal string parameter blocks special characters? — KillABug, Feb 28 '13 at 08:30
It seems like jQuery does the url encoding for you when you use the json form. And logically, it won't be able to do the same when you use a flat string representation because it wouldn't be able to distinguish the field names and the field values. — dlock, Feb 28 '13 at 08:31

"&" character from api url not saved to mysql database

2 Answers2