Calling PHP Web service via ajax in jQuery mobile

Question

I'm developing mobile application in jQuery Mobile.Its containing only html files. I'm going to get data from server using PHP. So I've used PHP native SOAP web services for this.I want get the values from my PHP function via web service. After hitting 'submit' button in my jQuery form,the web service should call using AJAX and it should retrieved form the PHP function.

I don't know how to call web service from jQuery mobile using AJAX.Please help me to this.Below are my files,

test.wsdl

<?xml version="1.0"?>
 <definitions name="HelloWorld" targetNamespace="urn:HelloWorld"               xmlns:tns="urn:HelloWorld" xmlns:xsd="http://www.w3.org/2001/XMLSchema"  xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"  xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/"  xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/">
  <types>
  <xsd:schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="urn:Hello">
  </xsd:schema>
   </types>

    <message name="doHello">
    <part name="yourName" type="tns:getName" />
   </message>

  <message name="doHelloResponse">
  <part name="return" type="tns:HelloResponse" />
    </message>

  <portType name="HelloPort">
     <operation name="doHello">
    <input message="tns:doHello" />
    <output message="tns:doHelloResponse" />
  </operation>
 </portType>

  <binding name="HelloBinding" type="tns:HelloPort">
 <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http" />
     <operation name="doHello">
    <soap:operation soapAction="urn:HelloAction" />
  <input>
    <soap:body use="encoded" namespace="urn:Hello"  encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" />
 </input>
 <output>
<soap:body use="encoded" namespace="urn:Hello" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" />
 </output>
</operation>
 </binding>

    <service name="HelloService">
   <port name="HelloPort" binding="tns:HelloBinding">
   <soap:address location="http:XXXXXXXXXXXXXXXXXXX/test_server.php" />
   </port>
    </service>
   </definitions>

http:XXXXXXXXXXXXXXXXXXX - represents my live server domain name.

Login.html

    <!DOCTYPE html>
<html>
<head>
<title>Submit a form via AJAX</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}

function onError(data, status)
{
alert('error');
// handle an error
}

$(document).ready(function() {
$("#submit").click(function(){

var formData = $("#callAjaxForm").serialize();

$.ajax({
type: "POST",
url: "http://XXXXXXXXXXXXXXXXXXX/test_server.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>

<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
<div data-role="header">
<h1>Call Ajax</h1>
</div>

<div data-role="content">
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="firstName">User Name</label>
<input type="text" name="firstName" id="firstName" value="" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</div>

<div data-role="footer">
<h1>GiantFlyingSaucer</h1>
</div>
</div>
</body>
</html>

test_server.php

    <?php
if(!extension_loaded("soap")){
dl("php_soap.dll");
}

ini_set("soap.wsdl_cache_enabled","0");
$server = new SoapServer("test.wsdl");

function doHello($name){

$text = 'Your name '.$name;

return $text;
}

$server->AddFunction("doHello");
$server->handle();
?>

I've tried the mentioned way.Its showing me the error part of AJAX.Please advice me get from server using webservice.

Can you post your Error log here ?

Krish R
– Krish R

2013-11-14 11:49:14 +00:00
Commented Nov 14, 2013 at 11:49 — Krish R
– Krish R, Commented Nov 14, 2013 at 11:49

Harish Singh · Accepted Answer · 2013-11-15 09:22:00Z

1

test_server.php is not required in your case. you need a soap client to use wsdl like as below:

let's say test_client.php

$client = new SoapClient("test.wsdl");

$name = "";
if(isset($_POST['firstName'])){
    $name = $_POST['firstName'];
}

$params = array(
  $name
);  


echo $response = $client->__soapCall("doHello", $params);

?>

Now change in Login.html

$(document).ready(function() {
    $("#submit").click(function(){

        var formData = $("#callAjaxForm").serialize();

        $.ajax({
            type: "POST",
            url: "http://XXXXXXXXXXXXXXXXXXX/test_client.php",
            cache: false,
            data: formData,
            success: onSuccess,
            error: onError
        });
        return false;
    });
});

JSONP:

Login.html

    $("#submit").click(function(){

    var formData = $("#callAjaxForm").serialize();

    $.ajax({
        data:formData,
        url: 'http://XXXXXXXXXXXXXXXXXXX/test_client.php',
        dataType: "jsonp",
        jsonpCallback: "onSuccess"
    });

    return false;
});


function onSuccess(data, status)
{
    $("#notification").text($.trim(data.result));
}

Now change in test_client.php

$response = $client->__soapCall("doHello", $params);

$responseData['result'] = $response;
$responseData = json_encode($responseData);

if(isset($_REQUEST['callback'])){
    $callback = $_REQUEST['callback'];
    print "$callback( $responseData );";
}else {
    print $responseData;
}

edited Nov 15, 2013 at 9:22

answered Nov 14, 2013 at 13:16

Harish Singh

3,3295 gold badges27 silver badges40 bronze badges

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

8 Comments

user1581939 Over a year ago

I'm testing this in my localhost and the url would be localhost/test/test_client.php.Inside the xampp its working well.If i run the login.html from the out of the XAMPP server,i'm getting the ajax error with [object Object].any suggestion ?

Harish Singh Over a year ago

host should be same for login.html and test_client.php. I am not getting any error as tested. Did you changed as I mentioned?

user1581939 Over a year ago

yes.Inside of my xampp server its working well.But i put the login.html in my desktop and tried run from this.In that time i'm getting this error '[object Object]' in ajax error part.Have you tried that ?

user1581939 Over a year ago

I tried the above alert.Its {"readyState":0,"responseText":"","status":0,"statusText":"error"}

user1581939 Over a year ago

Some one told that is a cross domain ajax problems.If yes how can i solve it ?

|

user1581939 · Accepted Answer · 2013-11-29 08:21:07Z

In this case mobile application is the client part.After submitting the page frm_login,it would be,

Login.html

     $(document).on('pageinit', function () {
    $("#frm_login").validate({
        rules: {
            firstName: "required",

        },
        submitHandler: function (form) { 
            validateLoginDetails();
        }
    });
});

function validateLoginDetails(){

    var xmlRequest = getXmlLoginRequest();
    var wsdlURL = getWSDL('doHello');

    $.ajax({
        url: wsdlURL,
        type: "POST",
        dataType: "text",
        data: xmlRequest,
        contentType: "text/xml; charset=\"utf-8\"",

        success: function(xmlResponse) {
            var parse_response = parseLoginResponse(xmlResponse);
            }else{
                $('#notification').text('Error on Login');
            }
        },
        error: function(xmlResponse) {

        }

    });

    return false;
}
function getWSDL(methodName){
    var url = 'http://demo.com/server/server.php?wsdl';
    return url+methodName;
}

function getXmlLoginRequest(){

    var name = $('#firstName').val();

    var xml = '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> \
                 <soap:Body> \
                    <doHello> \
                    <firstName>'+name+'</firstName> \
                    </doHello> \
                 </soap:Body> \
               </soap:Envelope>';

    return xml;
}

function parseLoginResponse(xmlResponse){
    alert(xmlResponse);
    var loginResponse = $(xmlResponse).find('loginResponse').text();

    if(loginResponse){
        return true;    
    } 
    return false;
}

test_server.php

    function doHello($name) { 

    $name = 'Your name is '.$name;
    $arr = array(
        "suceess" => $name

    );
    $jsnResponse = json_encode($arr);

    return $jsnResponse;
} 


ini_set("soap.wsdl_cache_enabled", "0"); 
$server = new SoapServer("test.wsdl"); 
$server->addFunction("doHello");  
$server->handle();

No need to use test_client.php.

Collectives™ on Stack Overflow

Calling PHP Web service via ajax in jQuery mobile

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related