ajax 问题总结

最新推荐文章于 2023-07-31 20:22:48 发布

Bill11YAng

最新推荐文章于 2023-07-31 20:22:48 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/softuse/article/details/103375909

版权

1. 首先 ajax在调试时的 type,url等都是显示未定义，如果success之后取数据未 undefined,则考虑是取数据的位置不对（考虑数组）

2. console.log（），console.log(typeof data) 方法在调试的时候会有用，可以打印出想要的数据样式

3. json数组样式

<!DOCTYPE html>
<html lang="en" meta charset="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        * {
            margin: 0;
            padding: 0px;
            font-size: 12px;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        #box {
            width: 500px;
            margin: 20px auto;
        }

        .btn {
            display: block;
            width: 50px;
            height: 50px;
            margin: 20px auto;
            line-height: 50px;
            text-align: center;
            border: 1px #000 solid;
            color: #000;
            transition: .3s linear;
        }

            .btn:hover {
                background: #000;
                color: #fff;
                font-weight: bold;
            }

        #con {
            margin-top: 20px;
        }

            #con option {
                line-height: 30px;
                text-align: center;
            }
    </style>


  
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(function () {
                $.ajax({
                    type: "GET", //请求的方式，也有POST请求
                    //url: "data.json", //请求地址，后台提供的,这里我在本地自己建立了个json的文件做例子
                    url: "api/values",
                   
                    dataType: "json", //json格式，后台返回的数据为json格式的。
                    success: function (data) {
                        console.log(data.Name);
                        var dataObj = data
                            ; //返回的result为json格式的数据
                        console.log(dataObj); 
                        con = "";
                        $.each(dataObj, function (index, item) {
                            con += "<option>姓名：" + index  +item.Name + "</option>";
                            con += "<option>性别：" + item.sex + "</option>";
                            con += "<option>现居地：" + item.address + "</option>";
                            con += "<option>岗位：" + item.job + "</option>";
                        });
                        console.log(con);    //可以在控制台打印一下看看，这是拼起来的标签和数据
                        $("#con").html(con); //把内容入到这个div中即完成
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div id="box">
        <a class="btn" href="javascript:;">点击</a>
        <select id="con" size="30"></select>
    </div>
</body>
</html>

 public class ValuesController : ApiController
    {
        // GET api/values
        public HttpResponseMessage Get()
        {
            //初始化测试对象
            TestJsonObj t = new TestJsonObj();
            t.Name = "中";
            t.Address = "GZ";

            TestJsonObj t2 = new TestJsonObj();
            t2.Name = "中";
            t2.Address = "GZ11";
            List<TestJsonObj> list = new List<TestJsonObj>
            {
                t,t2
            };


            //OBJ转化成JSON
            string json = JsonConvert.SerializeObject(list);

            //返回json数
            return new HttpResponseMessage()
            {
                Content = new StringContent(json, Encoding.UTF8, "application/json"),
            };
        }
}

[
  {
    "name": "小明",
    "sex": "M",
    "address": "北京",
    "job": "web前端工程师"
  }
]

Bill11YAng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫