0 Comments

jQuery Ajax实现简单的异步传输

发布于:2016-07-01  |   作者:爬行的蜗牛  |   已聚集:人围观

爬行的蜗牛在做网站的过程中,经常需要在模板页面传输参数到后台,jQuery Ajax功能可以完美实现,而且不用刷新页面用户体验也非常的好。

下面贴一下代码,然后再详细的解释:

模板页面:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<script type="text/javascript">  
$(function(){  
$.ajax(  
    {  
        type:'get',    //传输方式 get
        url : 'http://127.0.0.1/ajax.php?loginuser=lee&loginpass=123456',   //接受参数文件
        dataType : 'jsonp',  
        jsonp:"jsoncallback",  
        success  : function(data) {    //成功后回调函数
            alert("用户名:"+ data.user +" 密码:"+ data.pass);  
        },  
        error : function() {    //失败后回调函数
            alert('fail');  
        }  
    }  
);  
})  
</script>
</body>
</html>
服务器端代码:



<?php  
header('Content-Type:text/html;Charset=utf-8');  
$arr = array(  
    "user" => $_GET['loginuser'],  
    "pass" => $_GET['loginpass'],  
    "name" => 'response'  
  
);  
echo $_GET['jsoncallback'] . "(".json_encode($arr).")";   //输出数组内容
然后运行下 模板页面:


结果如下

爬行的蜗牛:http://www.pxwoniu.com/wzzt/151.html

标签:jQuery(2)Ajax(2)异步传输(1)
飞机

扫描二维码,访问爬行的蜗牛手机网站

在线咨询