Sending ajax request when data sent is html data

Question

I worked on a mvc program where on a click of a button I send data inside a TextArea to the controller. Typically my code worked as expected but this was not the case when the data inside the TextArea consisted of a html based data.

Html Code:

<textarea id="bodyInfo"> </textarea>
<button onclick="Submit()" id="submitInfo">Create Notification</button>

ajax:
    function Submit() {
        $.ajax({
            url: '@Url.Action("GetResults", "notification")',
            type: 'GET',
            data: { body: $('#bodyInfo').val()),
            cache: 'false',
            dataType: 'html',
            success: function (result) {
                $('#resultsTblInfo').html(result);
            }
        });
        return false;
    }

Sample Example of TextArea data:

<table style="width:100%">
<tbody>
<tr>
<td class="ellipses-title" style="color:#22557f;font-size:15px;font-weight:bold;margin-bottom:10px;margin-top:7px;border-right:1px solid #BFF1FD;text-align:right;padding-right:15px;"> The New Admin is Coming</td>
<td class="ellipses-text" style="padding-left:15px;" valign="center">Hello<br> Hello2</a>.
</td>
</tr>
</tbody>
</table>

What was seen above would work when TextArea was not html data but raw text but would fail when it was html data.

I was able to make this work by using

"encodeURIComponent($('#bodyInfo').val())" instead of "$('#bodyInfo').val()"

In the controller side, doing

"body = HttpUtility.UrlDecode(body)";

Are there better alternatives to achieve the same thing? Am I using encodeURIComponent against its intended nature? Why does $('#bodyInfo').val() not work when passing html values through ajax? If this question is a duplicate I would appreciate it if someone could provide me a link (i tried searching through google but found no satisfying answer)

Answer 1

I think that in your textarea html data, there was a "&" character. is so, the problem is that the character & cannot be sent to a server. this is because when sending data, the browser gathers data, separed by & character http://example.php?a=something&b=other . so, if there is & character in your data the browser will not be able to distinguish if it is a data or URI component.

The common solution is to transform your data to base64 text before it is sent. this way you can decode it in your server using base64_decode fonction (case of php) . you can base64 encode your data using window.btoa function in javascript. another solution is what you used.

a third solution is to replace & chars by something you know it will never exist in you textarea like [@#alpha]. hope it helps

Answer 2

That's exactly what you'd use encodeURIComponent for. The idea is to encode the (potentially problematic) value when sending it, then decoding it server-side in order to use it however it is need.

In fact, there's an example of this on MDN 's encodeURIComponent documentation page:

To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type "Thyme &time=again" for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair.