基于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 indexOf函数使用说明
Jul 03 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
Vue form表单动态添加组件实战案例
Sep 02 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
javascript 一些用法小结
2009/09/11 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
javascript 动态创建表格
2015/01/08 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python实现购物车功能的方法分析
2017/11/10 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
服务标语大全
2014/06/18 职场文书
销售人员求职信
2014/07/22 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
pytorch 如何使用float64训练
2021/05/24 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL