2011-11-04 48 views
1

我有一个jQuery的移动问题,我想显示返回的数据从PHP到jQuery的移动对话框。在jquery移动对话框显示数据

我该如何去做。

这里的代码来自Chad Lung。请有人可以帮我修改这个。

文件名:callajax.php

<?php 
    $firstName = $_POST[firstName]; 
    $lastName = $_POST[lastName]; 

    echo("First Name: " . $firstName . " Last Name: " . $lastName); 
?> 

文件名:index.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) 
     { 
      // handle an error 
     }   

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

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

       $.ajax({ 
        type: "POST", 
        url: "callajax.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">First Name</label> 
        <input type="text" name="firstName" id="firstName" value="" /> 

        <label for="lastName">Last Name</label> 
        <input type="text" name="lastName" id="lastName" 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> 

回答

0

如何下降的AJAX提交,并用这个方法来代替:

$.mobile.changePage("callajax.php", { 
    type: "post", 
    data: $("form#callAjaxForm").serialize(), 
    transition: "pop", 
    reverse: false, 
    changeHash: false 
});  

然后你PHP的应该返回一个完整的jQuery的移动页面元素,如下所示:

<div data-role="page" id="ajaxResultPage"> 
    <div data-role="header"> 
     <h1>Ajax Results</h1> 
    </div> 
    <div data-role="content"> 
     <?php echo("First Name: " . $firstName . " Last Name: " . $lastName); ?> 
    </div> 
</div> 
+0

我不想在html文件中添加php标记,我将编译为phonegap。有没有一种方法来显示数据并添加了PHP的东西 – seyz4all