基于JQuery框架的AJAX实例代码


Posted in Javascript onNovember 03, 2009

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"的按钮后触发函数 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> 
<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'])); 
?>
Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jquery实现拖动效果
Aug 10 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
Jquery AJAX 框架的使用方法
Nov 03 #Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 #Javascript
jQuery get和post 方法传值注意事项
Nov 03 #Javascript
js window.onload 加载多个函数的方法
Nov 02 #Javascript
深入认识javascript中的eval函数
Nov 02 #Javascript
javascript 按回车键相应按钮提交事件
Nov 02 #Javascript
JQuery 解析多维的Json数据格式
Nov 02 #Javascript
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
php socket方式提交的post详解
2008/07/19 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
js点击选择文本的方法
2015/02/09 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python3 深浅copy对比详解
2019/08/12 Python
详解python中index()、find()方法
2019/08/29 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
女子职高个人自荐书
2014/02/01 职场文书
聘用意向书
2014/07/29 职场文书
违纪检讨书
2015/01/27 职场文书
聘任合同书
2015/09/21 职场文书