ajax调用本地模拟数据（json文件或php文件）

最新推荐文章于 2023-04-01 23:37:29 发布

weixin_41466434

最新推荐文章于 2023-04-01 23:37:29 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/weixin_41466434/article/details/89958088

版权

注：本地需要搭建php配置环境。我的：因为涉及跨域访问，所以必须将文件放置在phpstudy的PHPTutorial的www的文件夹下，并开启phpstudy

一、ajax调用php文件

<body>
    <span class="content"></span>  
</body>

<script>
$(function(){
    function getData(){
        url='json.php';
        $.ajax({
            url: url,
            dataType: "jsonp", //采用JSONP方式(仅支持GET方式请求)      
            jsonp:"callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以不写这个参数，jQuery会自动为你处理数据
            type:"get",//可为post，但php中$_GET只能为get
            success:function(myData){
              $(".content").html("用户信息："+myData.username+","+myData.gender);
            }, 
        });
    }
    getData();
});
</script>

php文件

<?php 
	$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); 
	echo $_GET['callback']."(".json_encode($arr).")";
?>

二、ajax调用json文件

$(function(){
    function getData(){
        url='data.json';
        $.ajax({
            url: url,
            dataType: "json",  
            type:"get",
            success:function(myData){
              $(".content").html("用户信息："+myData.result.sk.username+","+myData.result.sk.gender);
            }, 
        });
    }
    getData();
});

json文件

{
	"result":{
		"sk":{
			"username":"lisi",
		    "age":"24",
		    "gender":"female"
		}
	}
}

三、完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <span class="content"></span>  
</body>
</html>
<script>
$(function(){
    function getData(){
        url='json.php';
        $.ajax({
            url: url,
            dataType: "jsonp",         
            jsonp:"callback",
            jsonpCallback:"success_jsonpCallback",
            type:"get",
            success:function(myData){
              $(".content").html("用户信息："+myData.username+","+myData.gender);
            }, 
        });
    }
    getData();
});
</script>
<style>
    html,body{
        height: 100%;
        font-size: 26.67vw;
    }
	.content{
		font-size: .26rem;
	}
</style>

weixin_41466434

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
ajax调用本地模拟数据（json文件或php文件）

注：因为涉及跨域访问，所以必须将文件放置在phpstudy的PHPTutorial的www的文件夹下，并开启phpstudy一、ajax调用php文件<body> <span class="content"></span> </body><script>$(function(){ function getDa...
复制链接

扫一扫