ajax

<script type="text/javascript">
    //使用ajax实现异步的方式
    //①原生xhr方式，或自定义封装xhr方法
    //②jq封装的异步方法：ajax（），get（），post（），load（），getJson（）方法等等
    //③使用promise(es6)方法实现axios
    function ajax(url, data, method, callback) { //url请求的地址,data发送给后端的数据,method请求的模式(get.post.put,delete) callback回调函数
        var xhr = new XMLHttpRequest();
        xhr.open(method, url, true);//打开异步连接
        xhr.send(data); //发送数据
        xhr.onreadystatechange = function () { //发送过程中的状态监听
            if (xhr.readyState == 4) { //发送完成
                if (xhr.status == 200) {
                    var result = xhr.responseText;
                    callback(result);//调用callback中的方法，处理result
                    return xhr.responseText;//??
                }
            }
        }
    }
    //文档加载完成执行
    window.onload = function () {
        //使用ajax方法实现异步调用
        this.ajax("/My/GetTourists", "", "get", /*(result) => { this.alert(result); }*/function (result) {
            //将result作为表格显示出来
            //将result字符串转换为json数组
            var jsons = JSON.parse(result);
            //遍历jsons，将数组中的每一个元素的数据取出, 放在表格中显示
            var temp = "<tr><td>{{Name}}</td><td>{{Start}}</td><td>{{End}}</td><td>{{Nation}}</td></tr>";
            for (var i = 0; i < jsons.length; i++) {
                var newtemp = temp;
                newtemp = newtemp.replace("{{Name}}", jsons[i]["TouristName"]);
                newtemp = newtemp.replace("{{Start}}", jsons[i]["StartTime"]);
                newtemp = newtemp.replace("{{End}}", jsons[i]["EndTime"]);
                newtemp = newtemp.replace("{{Nation}}", jsons[i]["NationalityName"]);
                $("table").append($(newtemp));
            }
        });
        
    }
</script>

H5

<div class="container"> 
    <table class="table table-bordered table-striped">
        <tr>
            <th>游客姓名</th>
            <th>入境时间</th>
            <th>出境时间</th>
            <th>国籍名称</th>
        </tr>
    </table>
</div>

ajax主要使用XMLHttpRequest，也可以将ajax看做一个方法

后台

//首先需引用  using Newtonsoft.Json;

public string GetTourists()//ajax调用GetTourists 返回一个json数组  在前端 进行数值绑定
    {
        var tours = db.Tourists.Select(p => new
        {
            p.TouristID,
            p.TouristName,
            p.StartTime,
            p.EndTime,
            p.Nationality.NationalityName
        });
        return JsonConvert.SerializeObject(tours);
    }

可实用的方法

Model封装 数据库对象

<div class="container" style="width:400px"> 
    <form action="AddPost" method="post">
        <div class="form-group">
            <label>用户姓名</label>
            <input type="text" name="TouristName" value="" class="form-control" />
        </div>
        <div class="form-group">
            <label>证件号</label>
            <input type="text" name="CardID" value="" class="form-control" />
        </div>
        <div class="form-group">
            <label>入境时间</label>
            <input type="text" name="StartTime" value="" class="form-control" />
        </div>
        <div class="form-group">
            <label>出境时间</label>
            <input type="text" name="EndTime" value="" class="form-control" />
        </div>
        <div class="form-group">
            <label>头像</label>
            <input type="text" name="HeadPic" value="" class="form-control" />
        </div>
        <div class="form-group">
            <label>国籍</label>
            <select class="form-control" name="NationalityID">
                <option value="1">中国</option>
                <option value="2">美国</option>
            </select>
        </div>
        <input type="submit"value="添加" class="btn btn-success form-control" />
    </form>
</div>        

条件:前端name必须和数据库列名相同

//数据封装 装箱
        Tourist tourist = new Tourist();
        tourist.TouristName = Request["TouristName"];
        tourist.CardID = Request["CardID"];
        tourist.StartTime = Convert.ToDateTime(Request["StartTime"]);
        tourist.EndTime = Convert.ToDateTime(Request["EndTime"]);
        tourist.HeadPic = Request["HeadPic"];
        tourist.NationalityID = Convert.ToInt32(Request["NationalityID"]);
        Tourist tourist = RequesModel<Tourist>();
//和下面方法等同Tourist tourist = RequesModel<Tourist>();
public T RequesModel<T>() where T : new() //where T:new()表示泛型约束,T类型
    {
        T model = new T();
        //获取对象的所有属性
        Type modelType = model.GetType();
        //从类型对象中获取该对象的所有属性
        PropertyInfo[] props = modelType.GetProperties();
        //遍历所有的属性
        foreach (var prop in props)
        {
            //取出属性的名称
            string propName = prop.Name;
            //按属性名称获取表单数据
            string propVal = Request[propName];
            //判断获取的值是否存在
            if (!string.IsNullOrEmpty(propVal))
            {
                //值获取到 就可以给model赋值了
                //获取属性的数据类型
                Type propType = prop.PropertyType;//可能存在可空类型 所有需要判断
                //获取可空类型的基础类型
                Type underType = Nullable.GetUnderlyingType(propType);
                prop.SetValue(model,Convert.ChangeType(propVal,underType??propType));//给model对象的prop对应的属性赋值
                //??的意思是如果前方为空就获取后方    前方不为空就获取前方
            }
        }
        return model;
    }