Clever Geek Handbook

Sending XML via AJAX

I am creating an XML document in jQuery as follows

var xmlDocument = $('<xml/>');
var foo = $('<foo/>');
var bar = $('<bar/>');

foo.append(bar);
xmlDocument.append(foo);

and try to redirect it to the server.

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false,
   contentType     :   'text/xml',
   data            :   xmlDocument,
   sucess          :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});

Even if the echos server is only "foo", I am getting alert('ajax request completed')

instead alert('success')

. What am I doing wrong? Is this the way to create an XML document or how to redirect it to the server?

The ajax request without XML document works fine and I am returning 'foo'.

UPDATE # 1

After changing precessData to processData and sucess to success, I get a dialog failed to send ajax request

.

When I change the data parameter in the ajax method to

$.ajax({
   ...
   data :   {
      data: xmlDocument
   },
   ...
});

I also get dialogue failed to send ajax request

.

The server side code needs to be accurate because it only

<?php
echo 'foo';
?>

UPDATE # 2

I converted my string as in AndreasAL's answer

// Convert to string instead of DOM Elements
xmlDocument = $("<wrap/>").append(xmlDocument).html();

// Url encode the string
xmlDocument = encodeURIComponent(xmlDocument);

but I still get the same dialog ( failed to send the ajax request

). So I thought there might be a bug in my XML document and rewrite my XML document using the snipplet code from AndreasAL's answer.

xmlDocument = $('<xml/>');
foo = $('<foo/>').appendTo(xmlDocument);
bar = $('<bar/>').appendTo(foo);

Still the same behavior.

So, I checked my XML document again and printed it in the dialog and it looks ok.

I'm running out of ideas where the error might be ...

+3


source to share


6 answers


Finally, I decided to transform the XML document and send it as a string to the server.

$xmlString = $(xmlDocument).html();

Due to the fact that I only need to store the received data, it doesn't matter if I return it as a string or xml.



I only had to change my ajax request, everything works fine now.

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   data            :   'data=' + xmlString,
   success         :   function( data ) {
      alert(data);
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});
+2


source


EDIT:

You have type-o it not precessData

itprocessData 

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false, // change to processData

and again in sucess

witch shout besuccess



Try:

var xmlDocument = $('<xml/>'),
    foo = $('<foo/>').appendTo(xmlDocument),
    bar = $('<bar/>').appendTo(foo);

      

        
        
        
      

    


// Convert to string instead of DOM Elements
xmlDocument = $("<wrap/>").append(xmlDocument).html();

// Url encode the string
xmlDocument = encodeURIComponent(xmlDocument);


$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   processData     :   false,
   contentType     :   'text/xml',
   data            :   xmlDocument,
   success         :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});
+4


source


You are using the jQuery object throughout the entire process.

Write your XML like this by concatenating the string. Don't make them DOM objects.

var xmlDocument = '<xml/>';
xmlDocument += '<foo/>';
xmlDocument += '<bar/>';

Then post it like this

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false,
   contentType     :   'text/xml',
   data            :   { 
                           data: xmlDocument //wrapped inside curly braces
                       },

   // Here is your spelling mistake
   success          :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});
+3


source


I think you have an error in your success code

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false,
   contentType     :   'text/xml',
   data            :   xmlDocument,
   success          :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});
+1


source


use $ .parseXML to manipulate XML, you treat xml as if it was html

http://api.jquery.com/jQuery.parseXML/

+1


source


use this:

data : { xml: xmlDocument }

The default values ​​require the key

0


source






More articles: