基于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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
canvas 中如何实现物体的框选
Aug 05 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
ajax php 实现写入数据库
2009/09/02 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jQuery取消ajax请求的方法
2015/06/09 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript手机振动API
2016/06/11 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python flask中动态URL规则详解
2019/11/22 Python
介绍一下Linux中的链接
2016/06/05 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
求职简历自荐信
2013/10/20 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
小学六年级毕业感言
2015/07/30 职场文书
中学团支部工作总结
2015/08/13 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
实例详解Python的进程,线程和协程
2022/03/13 Python