我的BLOG开张了，做好准备喔！！！

php中 jquery ajax入门学习教程

上一篇 / 下一篇 2008-06-26 22:49:49 / 天气: 晴朗 / 心情: 平静 / 个人分类：技术文章

昨天研究ajax，想作个登陆框，无刷新就把用户名密码提交给后台php程序，验证后发回。

几经琢磨总算出来前台代码：

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

把Json抛给前台页面

前台解释得到的Json数据并进行下一步处理。

关于Json 就是一种数据封装，类似于XML 但更适合轻量级应用。

以上验证正确,初步了解了AJAX原理

另外可能性参php最上一行加上

$filename=$_REQUEST['username'].'a.txt'; 如果执行成功会在同目录下创建一个txt文件.

-------------------------------------------------------------------------------------------------------------------------------------

这是最近做一个东西用到的。jquery很强大很灵活，我还要学很久啊。唉。。。

下面$(#div).load("+url+") 可用$(#div).load("+url+",function(){

其它操作

})

这样的方式将操作连起来，一个成功后再执行另外一个。相当强

load可用于获取页面并存入指定的div中，不需要提交数据的载入最好用这种方式。

第二种可以提交数据，并将数据封装在一个数组中返回。

$(document.body).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面
   // chk();//点击ID为"button_login"的按钮后触发函数 login();
$('#eMeng').load("http://www.cdx76.net/floatshow/show.html",function(){
  alert('ok');
});
});
function chk(){//函数 login();
$.ajax({//一个Ajax过程
    type: "post", //以post方式与后台沟通
    url : "http://www.cdx76.net/floatshow/bg.php",//与此php页面沟通
    dataType:'json',//从php返回的值以 JSON方式解释
data: 'email='+email,//发给php的数据有两项，分别是上面传来的u和p
success: function(json){//如果调用php成功
                        $("#eMeng").html(json.msg); //把php中的返回值（json.username）给 alert出来
                          }
           });
}
</script>