❥jquery的ajax(wampserver)：使html页面数据通过json导入，使用端口号localhost请求打开

最新推荐文章于 2023-12-06 17:24:48 发布

小兔崽啊啊啊

最新推荐文章于 2023-12-06 17:24:48 发布

阅读量980

点赞数 1

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119787388

版权

一、❥❥❥安装Wampserver，使用其发送请求

1.安装Wampserver

❥❥❥Wampserver作用：
Wamp就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块，开启/关闭鼠标点点就搞定，再也不用亲自去修改配置文件了，WAMP它会去做。再也不用到处询问php的安装问题了，WAMP一切都搞定了。
在这里插入图片描述
安装包，百度网盘链接：
链接：https://pan.baidu.com/s/1MYwtZ7qLnxcqm-Kxmaq_Kw
提取码：9hc5

2，安装过程

下载安装包以后一直下一步，跳出的第一个弹框会让你选择浏览器，选择谷歌或者火狐！！！不要选择默认的IE浏览器！！！文本编辑器使用默认的就好啦，然后就一直下一步，最后finish！！！
安装好后电脑界面菜单栏会出现这个
在这里插入图片描述
电脑界面会出现这个

如果是红色的就左键点击菜单栏图标，在出现的选项中，点击启动服务，会变成黄色或者绿色，如果绿色说明安装成功，左键点击图标，再点击顶部的localhost，会在你在安装的过程中选择的浏览器中打开这个界面
在这里插入图片描述

，如果黄色说明该程序的端口号被占用了，直接打开电脑的搜索框输入services.msc或者服务，回车会出现这个界面
在这里插入图片描述
找到这个SQL Server Reporting Services (MSSQLSERVER)
右键点击停止就可以了，图标变成绿色，安装成功！！！
更加具体的安装步骤：https://blog.csdn.net/weixin_43271060/article/details/98852375

二、❥❥❥html+jquery代码

注意！！！将所有文件放置在这个目录下（打开方式为：点击菜单栏里的绿色小图标，点击www目录，弹出图二目录，在目录中创建一个自己的文件夹，我创建的叫ajax,然后所有文件放在里面，包括jquery插件、图片、文本文件等）
在这里插入图片描述

ajax04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="goods">
    
    </ul>

</body>
<script src="./jquery-2.0.0.min.js"></script>
<script>
    window.onload=function(){
        var obj=$.ajax({
            type:"get",
            url:"produce.json",
            async:false,
            success:function(response,status,xhr){
                console.log(response);
            },
            error:function(){
                console.log("错啦");
            }
        })
        function Product(obj){
            this.src=obj.src;
            this.title=obj.title;
            this.price=obj.price;
        }
       
        Product.prototype={
            init:function(){
                $("<li></li>").html('<img src="'+this.src+'" alt=""><a>'+this.title+'</a><p>'+this.price+'</p>').appendTo($("ul"));
            }
        }
        $.each(obj.responseJSON.data,function(i,e){
            var pro =new Product(e);
            pro.init();
        })
    }
</script>
</html>

我的json文件
produce.json

{
    "data":[
        {
            "src":"./img/iu.png",
            "title":"777",
            "price":"777"
        },{
            "src":"./img/iu2.png",
            "title":"777",
            "price":"111"
        }
    

    ]
    
}

不可以在网页编辑器中直接使用浏览器打开网页，而是点击菜单栏中的wampserver绿色图标，再点击顶部的localhost，在浏览打开的界面中更改网址为http://localhost/ajax/ajax01.html，ajax/ajax01.html是我自己创建的文件夹的路径
如图：
我的文件夹
在这里插入图片描述
点击后

在这里插入图片描述
最终效果为
文字图片在浏览器中渲染出来了

三、总结

最后

1.AJAX的意义:通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

2.AJAX最根本原理就是在不刷新页面的情况下访问服务器处理数据，并根据数据的处理结果按你想要的方式对页面作出即时更改。具体流程：

3.AJAX的作用：
(1)、AJAX发出请求；
(2)、服务器接受请求，处理请求并将处理结果返回；
(3)、AJAX收到结果，按照设定的方式解析结果并更改页面内容。

小兔崽啊啊啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
❥jquery的ajax(wampserver)：使html页面数据通过json导入，使用端口号localhost请求打开

一、❥❥❥安装Wampserver，使用其发送请求1.安装Wampserver❥❥❥Wampserver作用：Wamp就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块，开启/关闭鼠标点点就搞定，再也不用亲自去修改配置文件了，WAMP它会去做。再也不用到处询问php的安装问题了，WAMP一切都搞定了。安装包，百度网盘链接：链接：https://pan.baidu.com/s/1MYwtZ
复制链接

扫一扫