4001—JS/Jquery随笔 | 易学教程

1、【AJAX】返回数据到<table>

C#代码如下

 public class TestController : Controller
    {
        List<userModel> userList = new List<userModel>();        
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult List()
        {
            userList.Add(new userModel()
            {
                Name="贾志国",
                Age=41,
                Address="北京市东城区",
                Sex="男"
            });

            userList.Add(new userModel()
            {
                Name="和平",
                Age=39,
                Address="北京市东城区和平里街道",
                Sex="女",
            });

            userList.Add(new userModel()
            {
                Name="贾志新",
                Address="北京市东城区和平里街道",
                Age=32,
                Sex="男"
            });
                                                 
            AjaxEntity<List<userModel>> myResult = new AjaxEntity<List<userModel>>() { 
                
                Success=true,
                Message="成功啦",
                Data=userList
            };
            //—9—    返回JSON
            return Json(myResult, JsonRequestBehavior.AllowGet);
        }        
    }

Index.html

<!--  在body块内      -->
    <div id="header_field">
        
        <form id="form_field">
            <input type="button" id="btnGet" value="获取" />
        </form>
        <div id="data-result">
            <p id="result_title"><h4><b>获取内容：</b></h4></p><p id="result_message"></p>
            
            <table border="1px" cellpadding="0">
                <tr>
                    <th width="150">姓名</th>
                    <th width="100">性别</th>
                    <th width="100">年龄</th>
                    <th width="200">地址</th>
                </tr>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        $("#btnGet").click(function () {
            $.ajax(
                   {
                       type: 'get',
                       url: '/Test/List',                      
                       success: function (data, status, xhr) {
                           
                           if(status){
                           
                               $("#result_title").html("!");
                               var msg = data.Message;

                               if (data.Success) {
                                   
                                   $("#result_message").html("返回成功—"+msg);
                               } else {

                                   $("#result_message").html("返回失败—"+msg);
                               }
                               
                               var list = data.Data;
                               loadList(list);
                           }else{
                               
                               $("#result_title").html("F");
                           }

                       },
                       error: function (xhr) {
                           alert(xhr);
                       }
              }
            )
        });

        function loadList(list) {
            var tbody = $("#tbody");
            var html = "";
            //_2 遍历数据源
            list.forEach(function (e) {

                html += "<tr>";
                html += "<td>" + e["Name"] + "</td>"
                html += "<td>" + e["Sex"] + "</td>"
                html += "<td>" + e["Age"] + "</td>"
                html += "<td>" + e["Address"] + "</td>"

                html += "</tr>";
            });

            tbody.append(html);
        }

    </script>

效果如下：

2、【JQuery/JS】基本用法

来源：CSDN

作者：zhang_yling

链接：https://blog.csdn.net/zhang_yling/article/details/103655524

标签

js代码

jquery