Jquery+Ajax+php学习笔记
昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回。
几经琢磨 总算出来前台代码:
<script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步
<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 = $("#password1").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "./php_ajax/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出来
}
});
}
</script>
具体的php 我只是把代码原封返回,以后该改成到数据库检查。
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>
json_encode的功能是 把php中的变量组成数组 再封装成Json格式 再echo出来返回给调用它的jquery.ajax()
总的来说 过程是:
用户填完用户名密码 单击按钮“登陆”
jQuery 取得用户名 密码
jQuery把两个变量以post方式发送给login.php
login.php 把变量进行处理 然后把返回封装成Json
把Json抛给 前台页面
前台解释得到的Json数据 并进行下一步处理。
关于Json 就是一种数据封装,类似于XML 但更适合轻量级应用。
相关文章
- 使用JQuery 合并两个 json 对象
- jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
- jquery中的ajax请求用法以及参数详情
- js,jquery,css,html5特效
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- ***Jquery下Ajax与PHP数据交换
- 通过AJAX和PHP,提交JQuery Mobile表单
- JavaScript 事件托付 以及jQuery对事件托付的支持
- JBox - 模态窗口,工具提示和消息 jQuery 插件
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
- 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
- 基于jQuery果冻式按钮焦点图切换代码
- 分享10款常用的jQuery焦点图插件
- jquery 改变变量出现值不同步
- 19前端学习之JQuery基础(三):jQuery尺寸、位置操作、jQuery事件、jQuery事件对象、Jquery拷贝对象、jQuery 多库共存、jQuery 插件