怎么使用jquery中ajax来获取数据，

1登峰造极

已于 2023-04-10 14:09:41 修改

阅读量1.5w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery ajax 数据

于 2017-11-06 21:51:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33323469/article/details/78462427

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何通过WampServer快速安装并部署PHP项目，包括设置环境、编写示例代码及实现数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没有写鸡汤了，真的是三天不要学习，就不学习了，1玩小时定律你懂的，直接说怎么写是做好的，直说最简单的方式，】

【1】我一般习惯帮项目放在php环境的www目录下运行.如果知道php的都知道怎么回事，还是来说怎么安装这个吧 ,

直接搜索WampServer这个就会看到百度软件中心，直接点击普通下载，下一部下一部的安装即可。打开，电脑又下角如果出现一个绿色的小标志表示成功。我们可以点击它帮语言切换成中文，点击一个localhost的我们就是打开一个窗口，默认是8080.如果你的端口被占用可以修改配置文件，但是新手来说还是直接把其他打开的一些软件先暂停了，这个就是运行正常。

这里要记得刚才你是安装在哪个目录下的，找到www目录，我们直接来写代码。
以上说的都是废话，正式的开始
在www目录下创建文件夹demo,再在demo下面建立index.html和index.json文件
josn文件是用来模拟数据的。

index.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
	<style>
		.main{
			width: 600px;
			height: 500px;
			background:  #c8c8c8;
		}
	</style>
</head>
<body>
	  <input type="button" value="点击" />
	  <div class="main">
	        	<ul>
	  	
	  	        </ul>
	  </div>
</body>
<script type="text/javascript">
	$(function(){
		           $.ajax({
		            url: "index.json",
		            type: "post",
		            dataType: "json",
		            contentType: "application/json;charset=UTF-8",
		            beforeSend: function (xhr) {
		                		        
		            },
		            success: function (response) {                                   
                           var obj = response;
		                    var html ="";
		                       $.each(obj,function(index, el) {
		                       	html +='<li>'+el.title+'</li>'
		                       });
                            $(".main").append(html);        
		            }
		        })
	});
</script>>
</html>

index.json文件

[
		{"title":"我们不一样"},
		{"title":"我如果你砍到这里，你想知道楼主长什么样，告诉你，30多岁了，        http://www.iqiyi.com/w_19ruwgagkh.html这个是楼主的视频链接"},
		{"title":"我的阿斯达岁的"}

]

josn需要满足键值的格式，

我们打开index.html文件，页面上就会有3条li.
就是这么简单
如果你刚才是在www下的demo 文件夹下的直接http://localhost/demo/index.html这样打开，如果你的文件没在服务器下，那你直接正常打开。

上面的都不要解释了吧 append这个就是帮内容添加到想添加带的容器中，each就是遍历这个对象。