user1581939 user1581939 - 7 months ago 48
PHP Question

Calling PHP Web service via ajax in jQuery mobile

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.

Answer

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;
}