How do I use ajax to post XML data to the server?

Question

This is exactly the data I want to pass to the server:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"
xmlns:gx="http://www.google.com/kml/ext/2.2"
xmlns:kml="http://www.opengis.net/kml/2.2"
xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<Placemark>
  <name>model1</name>
  <Model id="model_1">
    <Location>
      <longitude>-5.986926473546048</longitude>
      <latitude>37.37725475811571</latitude>
      <altitude>0</altitude>
    </Location>
    <Orientation>
      <heading>0</heading>
      <tilt>0</tilt>
      <roll>0</roll>
    </Orientation>
    <Scale>
      <x>1</x>
      <y>1</y>
      <z>1</z>
    </Scale>
    <Link>
      <href>http://www.ihs.org/objects/streetlight.dae</href>
    </Link>
    <ResourceMap>
      <Alias>
        <targetHref>http://www.ihs.org/objects/streetlight/texture0.jpg</targetHref>
        <sourceHref>streetlight/texture0.jpg</sourceHref>
      </Alias>
      <Alias>
        <targetHref>http://www.ihs.org/objects/streetlight/texture1.jpg</targetHref>
        <sourceHref>streetlight/texture1.jpg</sourceHref>
      </Alias>
    </ResourceMap>
  </Model>
</Placemark>
<Placemark>
  <name>model2</name>
  <Model id="model_2">
    <Location>
      <longitude>-5.986969267031843</longitude>
      <latitude>37.37727640316665</latitude>
      <altitude>0</altitude>
    </Location>
    <Orientation>
      <heading>0</heading>
      <tilt>0</tilt>
      <roll>0</roll>
    </Orientation>
    <Scale>
      <x>1</x>
      <y>1</y>
      <z>1</z>
    </Scale>
    <Link>
      <href>http://www.ihs.org/objects/streetlight.dae</href>
    </Link>
    <ResourceMap>
      <Alias>
        <targetHref>http://www.ihs.org/objects/streetlight/texture0.jpg</targetHref>
        <sourceHref>streetlight/texture0.jpg</sourceHref>
      </Alias>
      <Alias>
        <targetHref>http://www.ihs.org/objects/streetlight/texture1.jpg</targetHref>
        <sourceHref>streetlight/texture1.jpg</sourceHref>
      </Alias>
    </ResourceMap>
  </Model>
</Placemark>
</Document>
</kml>

I'm sending that this through an ajax post, thus,

$.ajax({
                    type: "POST",
                    url:"/php/sendEdition.php?kml="+output,
                    async: true,
                    success: function(datos){
                        //datakml = eval(datos);
                        document.getElementById('dataOut').innerHTML = datos;                          

            },
                   error: function (obj, error, objError){

                        alert("error");
                    }
                });

This is not working. No data is being sent to the server. I think that perhaps you cannot just pass HTML tags through ajax; is that right? I’m not using a form but that’s okay because I already got all the information.

Answer 1

Here's your problem:

type: "POST",
url:"/php/sendEdition.php?kml="+output+",

First, that quotation mark at the end, before the comma, is a syntax error. Remove it.

Second, you are appending the data to the URL, which will produce a URL like /php/sendEdition.php?kml=<?xml version="1.0" .... You can immediately see a problem here, in that question marks and ampersands (and other values) in the XML data should be URL escaped, but aren’t.

You could fix this by using encodeURIComponent(), thus:

type: "POST",
url: "/php/sendEdition.php?kml=" + encodeURIComponent(output),

Now your XML will be properly escaped.

However, why are you sending your XML in the URL at all? This is a POST request, with a POST body. Large data is better sent that way.

type: "POST",
url: "/php/sendEdition.php",
data: {"kml": output},

Answer 2

SOLUTION

$.ajax({
                        type     : "POST",
                        url      : "/php/uploadkml.php?",
                        data     : { "kml": encodeURIComponent(output) },
                        //dataType : "xml",
                        success  : function(datos){
                            document.getElementById('dataOut').innerHTML = datos;
                        alert("Success");
                        },
                        error    : function(datos) {
                            if (datos){
                            datakml = eval(datos);
                            document.getElementById('dataOut').innerHTML = datakml;
                            }
                        alert("Failed");
                        }
                    });

And decode it at the php.

There were many other options but I don't understand why this one was the only one for me...

Answer 3

You're using type: "POST" in your ajax call and then trying to access it using GET in your PHP code.

Change your PHP $_GET superglobals to $_POST instead like so:-

$id_user=$_POST['id_user'];
$user_name=$_POST['user_name'];
$user_pic_square=$_POST['user_pic_square'];
$id_place=$_POST['id_place'];
$place_name=$_POST['place_name'];
$place_pic=$_POST['place_pic'];
$latitude=$_POST['latitude'];
$longitude=$_POST['longitude'];
$kml=$_POST['kml'];               //THIS ONE IS THE BLOB FIELD
$place_type=$_POST['place_type'];
$description=$_POST['description'];

etc

Hope this helps.

Also, take a look at the PHP documentation - mysql_ functions are no longer used, use mysqli_ instead or PDO instead. This isn't your problem, just a suggestion.

W3Schools offers a nice starting point for PHP and MySQL tutorials.

Answer 4

Your are trying to store a pointer to a file into the database which is not possible. Instead you should store the contents of the file into the database.

mysql_query("INSERT INTO places_edited (id_user, user_name, user_pic_square, id_place, place_name, place_pic, latitude, longitude, kml, place_type, description)
VALUES ('$id_user', '$user_name', '$user_pic_square', '$id_place', '$place_name', '$place_pic', '$latitude', '$longitude', '$kml', '$place_type', '$description')");

You could also create a temporary file and store the filename, but the first option is easier.