走过平凡人生、留下平凡足迹 注册 | 登陆

Jquery.Ajax+php 学习笔记

登陆框,无刷新就把用户名密码提交给后台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  但更适合轻量级应用。

 

Tags: jquery, ajax, php

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

发表评论

评论内容 (必填):