一个简单的json数据，ajax请求数据并上传

最新推荐文章于 2024-08-13 10:40:16 发布

妖稚

最新推荐文章于 2024-08-13 10:40:16 发布

阅读量341

点赞数

分类专栏： ajax 文章标签： html jquery ajax

本文链接：https://blog.csdn.net/cherry429/article/details/83383518

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里是一个简单的HTML文件，具有一个简单的搜索功能

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <style>
        table{
            border:1px solid black;
            width:500px;
        }
        tr th,td{
            border:1px solid red;
            width:25%;
        }


    </style>
</head>
<body>
<div class="table">
    <table class="userinfo">
        <tr id="theader">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

    </table>
    <input type="text">
    <input type="button" value="搜索">
</div>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script>
    $(function(){
        $("input[type=button]").click(function(){
            var txt=$("input[type=text]").val();
            if($.trim(txt)!=""){

                $("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red");
            }else{
                $("table tr:not('#theader')").css("background","#fff").show();
            }
        });
        $.ajax({
            url:'../js/userList.json',
            type:'get',
            dataType:'json',
            success:function (data) {
                console.log(data);
                var theList =new Array,
                    info = data.first;
                for (var i in info){
                   theList =
                       '<tr>'+
                        '<td>'+info[i].id+'</td>'+
                        '<td>'+info[i].name+'</td>'+
                        '<td>'+info[i].sex+'</td>'+
                        '<td>'+info[i].age+'</td>'+
                   '</tr>';
                    $('.userinfo').append(theList);
                }
            },
            error:function (data) {
                console.log('出错')
            }

        })

    })
</script>

这里是JSON数据

{
  "first":[
    {  "id":"01",  "name":"小吕",  "sex":"男" , "age":"18" },
    {  "id":"02",  "name":"小红",  "sex":"女" , "age":"19" },
    {  "id":"03",  "name":"小欧",  "sex":"男" , "age":"21"},
    {  "id":"04",  "name":"小蔡",  "sex":"男" , "age":"18"}
  ],
  "mytime":[
    {"thesecond":"60","themin":"1","thehour":"0"}
  ]
}

一定要使用jQuery的文件哦！

第一次记录

妖稚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单的json数据，ajax请求数据并上传

这里是一个简单的HTML文件，具有一个简单的搜索功能&lt;!DOCTYPE html&gt;&lt;html lang="ch"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;搜索&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫