基于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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
php跨域调用json的例子
Nov 13 Javascript
javascript 闭包详解
Jul 02 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 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实现encode64编码类实例
2015/03/24 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
怎么清空javascript数组
2013/05/11 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python sorted排序方法如何实现
2020/03/31 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
员工培训邀请函
2014/02/02 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年实习生工作总结
2014/11/27 职场文书
十佳少年事迹材料
2014/12/25 职场文书
毕业生入职感言
2015/07/31 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android