jquery+ajax執行個體

 

 

 

<script src="./js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){//這個就是jQueryready ，它就像C語言的main 所有操作包含在它裡面

$("#button_login").mousedown(function(){

login(); //點擊ID為"button_login"的按鈕後觸發函數 login();

});

});

function login(){ //函數 login();

var username = $("#username").val();//取框中的使用者名稱

var password = $("#password").val();//取框中的密碼

$.ajax({ //一個Ajax過程

type: "post", //以post方式與後台溝通

url : "login.php", //與此php頁面溝通

dataType:'json',//從php返回的值以 JSON方式 解釋

data: 'username='+username+'&password='+password, //發給php的資料有兩項，分別是上面傳來的u和p

success: function(json){//如果調用php成功

//alert(json.username+'\n'+json.password); //把php中的傳回值（json.username）給 alert出來

$('#result').html("姓名:" + json.username + "<BR>密碼:" + json.password); //把php中的傳回值顯示在預定義的result定位器位置

}

});

//$.post()方式：

$('#test_post').mousedown(function (){

$.post(

'login.php',

{

username:$('#username').val(),

password:$('#password').val()

},

function (data) //回傳函數

{

var myjson='';

eval('myjson=' + data + ';');

$('#result').html("姓名1:" + myjson.username + "<BR>密碼1:" + myjson.password);

}

);

});

//$.get()方式：

$('#test_get').mousedown(function ()

{

$.get(

'login.php',

{

username:$('#username').val(),

password:$('#password').val()

},

function(data) //回傳函數

{

var myjson='';

eval("myjson=" + data + ";");

$('#result').html("姓名2:" + myjson.username + "<BR>密碼2:" + myjson.password);

}

);

});

}

</script>

 

<DIV style="BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; WIDTH: 300px; BACKGROUND: orange; HEIGHT: 200px; BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous" id=result>&nbsp;</DIV>

<FORM id=formtest method=post action=""><P><SPAN>輸入姓名:</SPAN><INPUT id=username type=text name=username></P>  <P><SPAN>輸入密碼:</SPAN><INPUT id=password type=text name=password></P></FORM>

<BUTTON id=button_login type=submit>ajax提交</BUTTON>

<BUTTON id=test_post type=submit>post提交</BUTTON>

<BUTTON id=test_get type=submit>get提交</BUTTON>