首页 > 其他分享 >Get Post Ajax 请求

Get Post Ajax 请求

时间:2023-02-22 08:33:46浏览次数:49  
标签:function console log Get list Ajax Post

 [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="[email protected]" 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>

}

  

 

标签:function,console,log,Get,list,Ajax,Post
From: https://www.cnblogs.com/friend/p/17143113.html

相关文章

  • rtk 快速实践 创建一个Post part2 文章列表和添加新文章
    这一节大概能对应文档的数据流结构项目启动大家好,经过rtk快速上手和前个视频的开发环境搭建,下面我们开始真正动手实践吖。从文档的探索初始项目开始,但是稍微有区别,以......
  • 在端点0由GET_REPORT类请求上传报表
    目录一般来说HID设备的报表在端点数量资源充裕的情况下都走中断端点上传,不会走控制端点即端点0上传,如果资源不足,可以利用端点0上传报表,USB协议中也是支持在端点0上传报表......
  • 使用模态对话框modal 实现CURD新添 修改 删除 Ajax提交
      namespaceMvcMovie.Models{publicclassEmployee{publicintId{get;set;}[Required]publicstringName{get;se......
  • redis探秘:选择合适的数据结构,减少80%的内存占用,这些点你get到了吗?
    ​redis作为目前最流行的nosql缓存数据库,凭借其优异的性能、丰富的数据结构已成为大部分场景下首选的缓存工具。由于redis是一个纯内存的数据库,在存放大量数据时,内存的占用......
  • VUEX 使用学习五 : getter
    转载请注明出处:Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据,起到的是包装数据的作用;有时我们需要从store中的state中派生出一......
  • POST 方法
     请注意,查询字符串(名称/值对)是在POST请求的HTTP消息主体中发送的:POST/test/demo_form.phpHTTP/1.1Host:runoob.comname1=value1&name2=value2有关POST请求......
  • PostgreSQL update set from 两表联合更新
    updatet_businesstbsetsystem_id=ir.application_idfromt_business_irregularirwheretb.affected_business=ir.application_nameupdatet_businesstbsetsyst......
  • javax.servlet.ServletContext.getVirtualServerName()Ljava/lang/String; spring
    2023-02-2111:44:13.924ERROR27256---[main]o.s.b.d.LoggingFailureAnalysisReporter:***************************APPLICATIONFAILEDTOSTART************......
  • rtk 快速实践 part1 创建一个Post
    开发环境搭建(Typescript+RTK模板的使用)嗨,大家好,经过rtk快速上手,下面我们开始真正动手实践吖。cra创建项目提供了Typescript配合redux的模板,这个模板就是下面两行安......
  • AJAX概念
    AJAX概念:ASynchronousJavaScriptAndXML异步的JavaScript和XML1异步和同步:客户端和服务器端相互通信的基础上客户端必须等待服务端的响应在等待的期......