基于JQuery框架的AJAX實例代碼
更新時間：2009年11月03日 23:34:50 作者：
基于JQuery框架的AJAX實例代碼，需要的朋友可以參考下。
index.html
<html>
<head>
<title>jQuery Ajax 實例演示</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(); //點擊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ù)有兩項，分別是上面?zhèn)鱽淼膗和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) //回傳函數(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']));
?>
復制代碼 代碼如下:
<html>
<head>
<title>jQuery Ajax 實例演示</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(); //點擊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ù)有兩項，分別是上面?zhèn)鱽淼膗和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) //回傳函數(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']));
?>
您可能感興趣的文章:
- jQuery使用ajaxSubmit()提交表單示例
- jquery實現(xiàn)ajax提交form表單的方法總結
- jquery中ajax處理跨域的三大方式
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery ajax例子返回值詳解
- JQuery AJAX提交中文亂碼的解決方案
- jquery ajax 向后臺傳遞數(shù)組參數(shù)示例
- jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
- jquery的ajax異步請求接收返回json數(shù)據(jù)實例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jQuery實現(xiàn)Ajax功能分析【與Flask后臺交互】
相關文章
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實例,本文講解了載入時隱藏、動態(tài)隱藏和顯示兩部分內容,需要的朋友可以參考下2015-04-04
jQuery實現(xiàn)頁面滾動時動態(tài)加載內容的方法
這篇文章主要介紹了jQuery實現(xiàn)頁面滾動時動態(tài)加載內容的方法,實例分析了jQuery實現(xiàn)動態(tài)加載頁面的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery制作效果超棒的手風琴折疊菜單的效果，這里推薦給大家，有需要的小伙伴可以參考下2015-04-04
在很多時候，JQuery的$()函數(shù)都返回一個類似數(shù)據(jù)的JQuery對象，例如$(‘div’)將返回div里面的所有div元素包裝的JQuery對象。在這種情況下，JQuery提供了幾個常用的屬性和方法來操作JQuery對象。本文將對此進行介紹，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了動態(tài)加載jQuery的兩種方法,實例分析了jquery動態(tài)加載的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
一個酷炫的圖片翻滾效果要實現(xiàn)這個效果并不難，只要思路對了，一切都好辦，下面有個不錯的示例，大家可以參考下2014-03-03
這篇文章主要介紹了jQuery中insertAfter()方法用法,實例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個指定的元素集合后面的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了JQuery日期插件datepicker的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了jQuery常見的遍歷DOM操作,結合實例形式詳細分析了針對DOM節(jié)點的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關函數(shù)與使用技巧,需要的朋友可以參考下2018-09-09