基于JQuery框架的AJAX實(shí)例代碼
更新時(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(){//這個(gè)就是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({ //一個(gè)Ajax過程
type: "post", //以post方式與后臺(tái)溝通
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(){//這個(gè)就是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({ //一個(gè)Ajax過程
type: "post", //以post方式與后臺(tái)溝通
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 向后臺(tái)傳遞數(shù)組參數(shù)示例
- jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jQuery實(shí)現(xiàn)Ajax功能分析【與Flask后臺(tái)交互】
相關(guān)文章
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實(shí)例,本文講解了載入時(shí)隱藏、動(dòng)態(tài)隱藏和顯示兩部分內(nèi)容,需要的朋友可以參考下2015-04-04
jQuery實(shí)現(xiàn)頁面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法,實(shí)例分析了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載頁面的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery制作效果超棒的手風(fēng)琴折疊菜單的效果，這里推薦給大家，有需要的小伙伴可以參考下2015-04-04
在很多時(shí)候，JQuery的$()函數(shù)都返回一個(gè)類似數(shù)據(jù)的JQuery對(duì)象，例如$(‘div’)將返回div里面的所有div元素包裝的JQuery對(duì)象。在這種情況下，JQuery提供了幾個(gè)常用的屬性和方法來操作JQuery對(duì)象。本文將對(duì)此進(jìn)行介紹，下面跟著小編一起來看下吧2016-12-12
動(dòng)態(tài)加載jQuery的兩種方法實(shí)例分析
這篇文章主要介紹了動(dòng)態(tài)加載jQuery的兩種方法,實(shí)例分析了jquery動(dòng)態(tài)加載的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過圖片翻滾效果
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-03
jQuery中insertAfter()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertAfter()方法用法,實(shí)例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個(gè)指定的元素集合后面的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了JQuery日期插件datepicker的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了jQuery常見的遍歷DOM操作,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)DOM節(jié)點(diǎn)的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-09-09