How to show textarea value properly after ajax request

i have message form where user can send message to each other now whenever user enters message in textarea & press send button, a slash is added for a line break like this-> hiiiiinhfghhfghfgh

here is my jquery code

$("#chat").submit(function(e) {
var m =  $("#message").val();
var data = $("#chat").serialize();
var n =  data;
var url = "/ajax/chat"; // the script where you handle the form input.
$("#message").val('');
$('.ms-body').animate({
    scrollTop: $('.ms-body')[0].scrollHeight}, 2000);
$.ajax({
       type: "POST",
       url: url,
       data: data, // serializes the form's elements.
       success: function(data)
       {
           $("#response").append(data);
       }
     });

e.preventDefault(); // avoid to execute the actual submit of the form.
});

here is how i clean input in the php file

function test_input($data) {
  $data = trim($data);
  $data =  strip_tags($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  $data =  htmlentities($data);
  return $data;
}

Everytime i press enter in texarea and give line break it adds Slash / What could be wrong in this? After serializing i also tried using var m = $("#message").val(); but the same problem occured

Proper Sample for ajax request Check these link

http://prntscr.com/bhu6a8  This is how i enter input
http://prntscr.com/bhu6en  This is what i get in response
http://prntscr.com/bhu6lb  This is what mozilla console shows