基于JQuery框架的AJAX實(shí)例代碼
更新時間：2009年11月03日 23:34:50 作者：
基于JQuery框架的AJAX實(shí)例代碼，需要的朋友可以參考下。
index.html
<html>
<head>
<title>jQuery Ajax 實(shí)例演示</title>
</head>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//這個就是jQueryready ，它就像C語言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //點(diǎn)擊ID為"button_login"的按鈕后觸發(fā)函數(shù) login();
});
});
function login(){ //函數(shù) 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, //發(fā)給php的數(shù)據(jù)有兩項(xiàng)，分別是上面?zhèn)鱽淼膗和p
success: function(json){//如果調(diào)用php成功
//alert(json.username+'\n'+json.password); //把php中的返回值（json.username）給 alert出來
$('#result').html("姓名:" + json.username + "<br/>密碼:" + json.password); //把php中的返回值顯示在預(yù)定義的result定位符位置
}
});
//$.post()方式：
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回傳函數(shù)
{
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) //回傳函數(shù)
{
var myjson='';
eval("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密碼2:" + myjson.password);
}
);
});
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>輸入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>輸入密碼:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>
login.php
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>
復(fù)制代碼 代碼如下:
<html>
<head>
<title>jQuery Ajax 實(shí)例演示</title>
</head>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//這個就是jQueryready ，它就像C語言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //點(diǎn)擊ID為"button_login"的按鈕后觸發(fā)函數(shù) login();
});
});
function login(){ //函數(shù) 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, //發(fā)給php的數(shù)據(jù)有兩項(xiàng)，分別是上面?zhèn)鱽淼膗和p
success: function(json){//如果調(diào)用php成功
//alert(json.username+'\n'+json.password); //把php中的返回值（json.username）給 alert出來
$('#result').html("姓名:" + json.username + "<br/>密碼:" + json.password); //把php中的返回值顯示在預(yù)定義的result定位符位置
}
});
//$.post()方式：
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回傳函數(shù)
{
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) //回傳函數(shù)
{
var myjson='';
eval("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密碼2:" + myjson.password);
}
);
});
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>輸入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>輸入密碼:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>
login.php
復(fù)制代碼 代碼如下:
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>
您可能感興趣的文章:
- jQuery使用ajaxSubmit()提交表單示例
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jquery中ajax處理跨域的三大方式
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery ajax例子返回值詳解
- JQuery AJAX提交中文亂碼的解決方案
- jquery ajax 向后臺傳遞數(shù)組參數(shù)示例
- jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
- jquery的ajax異步請求接收返回json數(shù)據(jù)實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jQuery實(shí)現(xiàn)Ajax功能分析【與Flask后臺交互】
相關(guān)文章
本篇文章給大家總結(jié)了關(guān)于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學(xué)習(xí)下吧。2018-01-01
這篇文章主要介紹了jQuery事件用法實(shí)例匯總,對事件的綁定及各類事件的用法做了較為詳盡的實(shí)例分析,有很好的借鑒價值,需要的朋友可以參考下2014-08-08![JQuery 無廢話系列教程(一) jquery入門 [推薦]](http://img.jbzj.com/images/xgimg/bcimg2.png)
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.2009-06-06
jQuery中隊列queue()函數(shù)的實(shí)例教程
這篇文章主要介紹了jQuery中隊列queue()函數(shù)的實(shí)例教程,queue()函數(shù)為JavaScript函數(shù)的執(zhí)行順序控制操作提供了便利,需要的朋友可以參考下2016-05-05
jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預(yù)覽
項(xiàng)目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動到圖片時顯示圖片預(yù)覽等等，感興趣的朋友可以參考下2013-01-01
jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法,涉及jQuery針對頁面元素的獲取及樣式動態(tài)操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
擴(kuò)展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
easyui可以說是輕量級的前端UI框架，更新到1.2.1支持更多的事件，方法和屬性2010-11-11
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例，需要的朋友可以參考下2015-12-12
jQuery 圖片查看器插件 Viewer.js用法簡單示例
這篇文章主要介紹了jQuery 圖片查看器插件 Viewer.js用法,結(jié)合簡單示例形式分析了jQuery 圖片查看器插件 Viewer.js的基本功能、調(diào)用方法及后臺數(shù)據(jù)調(diào)用處理技巧,需要的朋友可以參考下2020-04-04
Jquery動態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼
這篇文章主要介紹了Jquery如何動態(tài)添加及刪除頁面節(jié)點(diǎn)元素，示例代碼如下，需要的朋友不要錯過2014-06-06