基于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面向对象之this关键词用法分析
Jan 13 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
原生小程序封装跑马灯效果
Oct 21 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP函数常用用法小结
2010/02/08 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
JS实现多选框的操作
2020/06/24 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
大学生考试作弊检讨书1000字
2014/10/14 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
清洁工岗位职责
2015/02/13 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS