jquery,
02 1 月

jquery,

Powen Ko

|

CH10 AJAX

|

off

Post

 

這個主要是練習使用 jQuery 做 ajax POST 的動作.然後把結果塞回網頁上面.

先簡單寫個 helloworld 的 php. 限定它只接收 POST method.

1
2
3
4
5
6
7
 
<?
if (isset($_POST["name"])) {
    echo “aloha “.$_POST["name"];
} else {
    echo “get out!”;
}
?>

在html內弄個區塊顯示回傳值:

1
 
<div class=”message”></div>

jQuery 部份只要寫下面給行 codes就可以達成 :

1
2
3
4
5
6
7
8
9
 
<script type=”text/javascript”>
    $(document).ready(function() {
        $.post(’helloworld.php’,{
            name: “sam”
        }, function(txt){
            $(’div.message’).html(txt);
        });
    });
</script>

這樣就完成了簡單的 jQuery 使用 ajax 呼叫POST method. 看一下 DEMO

Button

Add 2 button, click

$(‘#dialog_reTry’).click(function(){
$(‘#dialog’).dialog(‘close’);
return false;
});
$(‘.dialog_button, ul#icons li’).hover(
function() { $(this).addClass(‘ui-state-hover’); },
function() { $(this).removeClass(‘ui-state-hover’); }
);

$(‘#dialog_reTry’).click(function(){
$(‘#dialog’).dialog(‘close’);
return false;
}); $(‘.dialog_button, ul#icons li’).hover( function() { $(this).addClass(‘ui-state-hover’); },  function() { $(this).removeClass(‘ui-state-hover’); } );

});

</script>

<style type=”text/css”>

/*demo page css*/

.dialog_button {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

.dialog_button span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

#dialog_signUp {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

#dialog_signUp span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

</style>

<a href=”#” id=”dialog_retry” class=”ui-state-default ui-corner-all dialog_button”>Retry</a>

<a href=”#” id=”dialog_signUp” class=”ui-state-default ui-corner-all dialog_button”>Sing Up</a>