2016年2月12日 星期五

PHP教學 - 使用 jquery mobile 時 ajax 技巧

通常原生的 javascript 或 jquery 可以利用 ajax 來和伺服器端的程式進行資料交換,但若是想使用 jquery mobile 時能否利用 ajax 來進行資料交換呢?我們提供下列範例來說明如何使用 jquery mobile ajax 和 php 做資料交換。
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> 

伺服器端
callajax.php
<?php 
    $firstName = $_POST['firstName']; 
    $lastName = $_POST['lastName']; 
      
    echo("First Name: " . $firstName . " Last Name: " . $lastName); 
?> 

沒有留言:

張貼留言