dynamically build data string for ajax call that contains html

Question

For a long time I have been using the below code to dynamically build a string representing key value pairs to be used in an ajax call.

This has been working quite well for my originally simple needs.

// make an array of strings representing key value pairs
var feedback = ['var1=val1', 'var2=val2', 'var3=val3' ]; 
// join each pair with "&" seperating them
var dataString = feedback.join('&');         

// make an ajax call 
  $.ajax({
type: "POST",
url: "_php/feedback.php",
data: dataString, //pass in the built vars 
success: function() {
    // do stuff...
}
});

I now have the need to send html as values in the data string. First thing I notice is that html containing '&' is going to be an issue so I made a simple test using var2= val2:

  // make any array of strings representing key value pairs
      var feedback = ['var1=val1', 'var2=<span>&nbsp;val2<span>', 'var3=val3' ]; 
      // join each pair with "&" seperating them
      var dataString = feedback.join('&');       

      // amke an ajax call 
        $.ajax({
      type: "POST",
      url: "feedback.php",
      data: dataString, //pass in the built vars 
      success: function(info) {
         $('#result').html(info);
      }
      });

Then in my php page:

<?php

$var1=$_POST['var1'];
$var2=$_POST['var2'];
$var3=$_POST['var3'];

echo $var1.'<br>'.$var2.'<br>'.$var3.'<br>';
?>

I want the script to return:

val1<br><span>&nbsp;val2<span><br>val3<br>

But, just as I suspected, the return output was:

val1<br><span><br>val3<br>

A quick look in the inspector shows: enter image description here

How can I dynamically create a string to use with data: dataString, in an ajax call that may contain html?

I tried searching for this but all I can find is "how to send post data with an html form" which clearly doesnt help.

Halayem Anis · Accepted Answer · 2015-02-06 08:46:04Z

1

// make an array of strings representing key value pairs
var feedback = ['var1=val1', 'var2=val2', 'var3=val3' ]; 
// to apply encodeURIComponent function for each cell
feedback = feedback.map(function (cell) 
{
    var res = cell.split('=');
    return res[0] + '=' + encodeURIComponent (res[1]);
}) ;

// join each pair with "&" seperating them

var dataString = feedback.join('&');

 $.ajax({
     type    : "POST",
      url    : "feedback.php",
      data   : dataString,
      success: function(info) {
          $('#result').html(info);
      }
 });

edited Feb 6, 2015 at 8:46

answered Feb 6, 2015 at 7:26

Halayem Anis

7,8052 gold badges28 silver badges45 bronze badges

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

7 Comments

Wesley Smith Over a year ago

Unfortunately, this returns the same val1 val3 

Halayem Anis Over a year ago

@DelightedD0D you have to clear your browser's cache : user CTRL+R

Wesley Smith Over a year ago

I did try that I even tried in a different browser altogether, same result. Do I maybe need to encode the portion of the string before I join them al together?

Wesley Smith Over a year ago

+1 for the push in the right direction, encodeURIComponent() does the trick if I apply it to just the value then put the strings together

Halayem Anis Over a year ago

@DelightedD0D good to know that i helped you, i edited my answer with your correction

|

Collectives™ on Stack Overflow

dynamically build data string for ajax call that contains html

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related