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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33323469/article/details/78462427

好久没有写鸡汤了,真的是三天不要学习,就不学习了,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就是遍历这个对象。

没有更多推荐了,返回首页