一、❥❥❥安装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收到结果,按照设定的方式解析结果并更改页面内容。