php ajax异步加载_php+jQuery+Ajax简单实现页面异步刷新

页面显示如下：

JQueryAjax.html中的代码如下(用的较为简单的$.post)

JQueryAjax+PHP

用户名:

密码:

ajax提交

$(document).ready(function(){

$(".butn").click(function(){

var username = $("#username").val();

var password = $("#password").val();

$.post('ajax.php',{name:username,pwd:password},function(data) {

alert(data);

$(".con").html(data);

})

})

})

ajax.php

echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."
";

//这里可以进行一些操作，比如数据库交互

echo "操作完毕";

?>

在非json格式下，后台只能返回字符串，如果想后台返回数组，可以采用json格式

例如将JQueryAjax中的代码修改为如下形式：

JQueryAjax+PHP

用户名:

密码:

ajax提交

$(document).ready(function(){

$(".butn").click(function(){

var username = $("#username").val();

var password = $("#password").val();

$.ajax({

url: "ajax.php",

type: "POST",

data:{name:username,pwd:password},

dataType: "json",

error: function(){

alert('Error loading XML document');

},

success: function(data,status){//如果调用php成功

alert(status);

alert(data);

$('.con').html("用户名:"+data[0]+"密码:"+data[1]);

}

});

})

})

ajax.php

$name = $_POST['name'];

$pwd = $_POST['pwd'];

$array = array("$name","$pwd");

//这里进行一个些操作，比如数据库交互

echo json_encode($array);//json_encode方式是必须的

?>

运行效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。