学海无涯

导航

Get Post Ajax 请求

 [HttpPost]
        public JsonResult PostTest(string name)
        {
            List<Student> list = GetStudents();
            list.Add(new Student { Name = name, Id = 6 });
            return Json(list);
        }
        public JsonResult GetTest()
        {
            List<Student> list = GetStudents();
            return Json(list);
        }
        private List<Student> GetStudents()
        {
            List<Student> list = new List<Student>
            {
                new Student { Id = 1, Name = "张三" },
                new Student { Id = 2, Name = "李四" },
            };
            return list;
        }

 

<header>
    <h1>CoffeeRun</h1>
</header>
<form>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label for="coffeeOrder">Coffee Order</label>
                <input class="form-control" name="coffee" id="coffeeOrder" autofocus />
            </div>
            <div class="form-group">
                <label for="emailInput">Email</label>
                <input class="form-control" type="email" name="emailAddress" id="emailInput"
                       placeholder="dr@who.com" value="" />
                <div class="radio">
                    <label>
                        <input type="radio" name="size" value="short" />
                        Short
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="size" value="tall" checked />
                        Tall
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="size" value="grande" />
                        Grande
                    </label>
                </div>
                <div class="form-group">
                    <label for="flavorShot">Flavor Shot</label>
                    <select id="flavorShot" name="flavor">
                        <option value="">None</option>
                        <option value="caramel">Caramel</option>
                        <option value="almond">Almond</option>
                        <option value="mocha">Mocha</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="strengthLevel">Caffeine Rating</label>
                    <input name="strength" id="strengthLevel" type="range" value="30" />
                </div>
                <button id="submit" type="button" class="btn btn-primary">Submit</button>
                <button onclick="cancel(8)" type="reset" class="btn btn-secondary">Reset</button>
                <button id="getTest" type="button" class="btn btn-primary">Submit</button>


            </div>
        </div>
    </div>
</form>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        function cancel(id) {//事件函数
            alert('id:' + id);
        }
        $(function () {
            //为Button按钮添加 Click 事件并发送Post请求
            $('#submit').click(function () {
                alert($('#coffeeOrder').val());//获取表单元素id=coffeeOrder的值
                //调用ajax 的 post请求
                $.post("/BootStrap/PostTest", {name:"测试Post请求"}, function (response,status) {
                    console.log('Post响应结果如下:');
                    console.log(response);
                    console.log('状态:'+status);
                })
            })
            //为Button按钮添加 Click 事件并发送Get请求
            $('#getTest').click(function () {
                alert($('#coffeeOrder').val());//获取表单元素id=coffeeOrder的值
                //调用ajax 的 post请求
                $.get("/BootStrap/GetTest", { name: "测试Get请求" }, function (response, status) {
                    console.log('Get响应结果如下:');
                    console.log(response);
                    console.log('状态:'+status);
                })
            })

        });
    </script>

}

  

 

posted on 2023-02-22 08:22  宁静致远.  阅读(12)  评论(0编辑  收藏  举报