在jQuery mobile中通过ajax调用PHP Web服务

时间:2013-11-14 11:44:59

标签: php ajax web-services jquery-mobile soap

我正在jQuery Mobile中开发移动应用程序。它只包含html文件。我将使用PHP从服务器获取数据。所以我已经使用PHP本机SOAP Web服务。我想通过Web服务从我的PHP函数中获取值。 在我的jQuery表单中点击“提交”按钮后,Web服务应该使用AJAX进行调用,它应该从PHP函数中检索。

我不知道如何使用AJAX从jQuery mobile调用web服务。请帮助我。这是我的文件,

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 - 代表我的实时服务器域名。

的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();
?>

我尝试了上面提到的方法。它向我展示了AJAX的错误部分。请建议我使用webservice从服务器获取。

2 个答案:

答案 0 :(得分:1)

在您的情况下,

test_server.php不是必需的。你需要一个soap客户端来使用wsdl,如下所示:

让我们说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);

?>

现在更改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));
}

现在更改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;
}

答案 1 :(得分:0)

在这种情况下,移动应用程序是客户端部分。提交页面frm_login后,它将是,

的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(); 

无需使用test_client.php。