title: Using a SOAP WebService containing JSON Payload
body: <p>I am trying to write a WebApp that consumes SOAP web services that embeds JSON data, and have hit a challenge. I'd appreciate assistance on this. Thank you.</p>
  
  <p>Below is the expected structure of the Web Service Request:</p>
  
  <pre><code>&lt;logonrequest&gt;
      {
      "userid":"username",
      "password":"password",
      "Timestamp":""
      }
  &lt;/logonrequest&gt;
  </code></pre>
  
  <p>Below is the structure of the expected Web Service Response:</p>
  
  <pre><code>&lt;return&gt;
      {
          "userid":"username",
          "displayName":"Firstname Lastname",
          "accountBalance":0.0,
          "statusCode":"0|SUCCESS",
          "statusDesc":"Logon Success",
          "sessionid":"12047CC560484D21BD328EC8F22814ED",
          "lastTransactionTime":"20131130234326"
      }
  &lt;/return&gt;
  </code></pre>
  
  <p>Below is my Code:</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Calling Web Service from jQuery&lt;/title&gt;
      &lt;script type="text/javascript" src="./js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/jquery.soap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#btnCallWebService").click(function (event) {
                  $.soap({
                      url: 'URL GOES HERE',
                      elementName: 'logonrequest',
                      appendMethodToURL: false,
                      soap12: false,
                      data: "{'userid':'bernard','password':'password','Timestamp':''}",
                      // data: {
                      //     'logonrequest': "{'userid':'bernard','password':'password','Timestamp':''}"
                      // },
                      beforeSend: function (SOAPRequest)  {
                          alert('Request: ' + SOAPRequest);
                      },
                      success: function (soapResponse) {
                          alert('0: success');
                      },
                      error: function (SOAPResponse) {
                          alert('1: failed');
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h3&gt;
          Calling Web Services with jQuery/AJAX
      &lt;/h3&gt;
      Enter your name:
      &lt;input id="txtName" type="text" /&gt;
      &lt;input id="btnCallWebService" value="Call web service" type="button" /&gt;
      &lt;div id="response" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Using this:</p>
  
  <pre><code> elementName: 'logonrequest',
   ...
   data: "{'userid':'bernard','password':'password','Timestamp':''}"
  </code></pre>
  
  <p>I get </p>
  
  <pre><code>Error: Invalid XML: {'userid':'bernard','password':'password','Timestamp':''}
  </code></pre>
  
  <p>Using this:</p>
  
  <pre><code> elementName: 'logonrequest' OR method: 'logonrequest',
   ...
   data: {
       'logonrequest': "{'userid':'bernard','password':'password','Timestamp':''}"
   }
  </code></pre>
  
  <p>The request fails, because the request actually created is:</p>
  
  <pre><code> &lt;soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"&gt;
      &lt;soap:Body&gt;
          &lt;logonrequest&gt;
              &lt;logonrequest&gt;
                  {
                      'userid':'bernard',
                      'password':'password',
                      'Timestamp':''
                  }
              &lt;/logonrequest&gt;
          &lt;/logonrequest&gt;
      &lt;/soap:Body&gt;
   &lt;/soap:Envelope&gt;
  </code></pre>
  
  <p>How can I have it send a request that looks exactly like the required sample request above to successfully hit the services? Thank you.</p>