• asp.net mvc jquery json 传递复杂参数


    js中区分大小写;

    model类

    public class Student
        {
            public string name { get; set; }
            public int id { get; set; }
            public string gender { get; set; }
            public int age { get; set; }
            public List<Play> ListPlay { get; set; }
        }
        public class Play
        {
            public string ID { get; set; }
            public string Name { get; set; }
        }
     
    Controller

     public HttpResponseMessage PostStudent(Student student)
            {
                student = studentRepository.Add(student);
                var response = Request.CreateResponse<Student>(HttpStatusCode.Created, student);
                string uri = Url.Link("DefaultApi", new { id = student.id });
                response.Headers.Location = new Uri(uri);
                return response;
            }
            //  [HttpPost] HttpResponseMessage  IEnumerable<Student>
           // [HttpPost]
    //返回复杂对象
            public HttpResponseMessage PostStudentsByReq(StudentReq studentReq, string criteria)
            {
               var students=   studentRepository.GetAll().Where(
                       s => string.Equals(s.age.ToString(), studentReq.age.ToString(), StringComparison.OrdinalIgnoreCase));
               Student stu = new Student();
               stu.age = 1;
               stu.gender = "aa";
               stu.id = 112;
               stu.name = "aaa";
               stu.ListPlay = new List<Play>();
               Play play = new Play();
               play.ID = "11";
               play.Name = "张三";
               stu.ListPlay.Add(play);
               play = new Play();
               play.ID = "12";
               play.Name = "name2";
               stu.ListPlay.Add(play);
               List<Student> list = new List<Student>();
               list.Add(stu);
               var response = Request.CreateResponse(HttpStatusCode.OK, list);
               return response;
              //return students;
            }

    html页

    add方法js方法 jquery

     //Adds a Student to the List
        function AddStudent() {
            debugger;
            var Play = {
                ID: '1',
                Name: "张三"
            };
            var Play2 = {
                ID: '2',
                Name: "李四"
            };
            var PlayList = new Array();
            PlayList.push(Play);
            PlayList.push(Play2);
    var student = {
                name: document.getElementById('newStudentName').value,
                id: document.getElementById('newStudentId').value,
                gender: document.getElementById('newStudentGender').value,
                age: document.getElementById('newStudentAge').value,
                ListPlay: PlayList
            };
          
            
            $.ajax({
                url: 'http://localhost:60792/api/student/',
                type: 'POST',
                data: JSON.stringify(student),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    alert('Student added Successfully');
                    GetAllStudents();
                },
                error: function () {
                    alert('Student not Added');
                }
            });
        }

    html部分代码

    <div>
        <h1 style="color: #f00">Add or Update a Student </h1>
        <table style="margin-left: 15px">
            <tr>
                <td><span>Name</span></td>
                <td>
                    <input id="newStudentName" type="text" /></td>
            </tr>
            <tr>
                <td><span>ID</span></td>
                <td>
                    <input id="newStudentId" type="number" /></td>
            </tr>
            <tr>
                <td><span>Gender</span></td>
                <td>
                    <select id="newStudentGender">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select></td>
            </tr>
            <tr>
                <td><span>Age</span></td>
                <td>
                    <input id="newStudentAge" type="number" /></td>
            </tr>
            <tr>
                <td>
                    <button id="postStudent" onclick="AddStudent()">Add New Student</button></td>
                <td>
                    <button id="putStudent" onclick="PutStudent()">Update Student</button></td>
            </tr>
        </table>
    </div>

    前台jquery 解析复杂对象 对象中包含对象集合 js代码

    function GetStudentByReq_Post() {
            alert("开始");
            debugger;
            var studentReq = {
                name: 'ab',
                id: '1',
                gender: 'man',
                age: '15'
            };
            var age = 22;
            // jQuery.support.cors = true;
            $.ajax({
                            url: 'api/student?criteria=full',
                type: 'POST',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(studentReq),
                success: function (data) {
                    alert(data);
                  //  WriteResponse(data);
                    WriteResponses(data);
                },
                error: function (x, y, z) {
                    alert('The Student not found in the List for the given ID');
                }
            });
            //Displays in a Table
            function WriteResponses(students) {
                var strResult = "<table><th>Name</th><th>Student ID</th><th>Gender</th><th>Age</th>";
                $.each(students, function (index, student) {
                    strResult += "<tr><td>" + student.name + "</td><td> " + student.id + "</td><td>" + student.gender + "</td><td>" + student.age + "</td></tr>";
                    strResult += "<ul>";
                    $.each(student.ListPlay, function (index1, play) {
                        strResult += "<li>" + play.ID + "  " + play.Name + "</li>"
                    });
                    strResult += "</ul>";
                });
                strResult += "</table>";
                $("#divResult").html(strResult);
            }
        }

    Html部分代码

    <div>
          <button id="getStudentByReq2" onclick="GetStudentByReq_Post()">获取列表2</button>
    </div>
    <div id="divResult" style="margin-left: 15px"></div>
  • 相关阅读:
    Node.js 基础介绍
    你所不知道该如何回答的面试题(一)
    深浅拷贝
    CSRF攻击:陌生链接不要随便点
    跨站脚本攻击(XSS)
    同源策略:为什么XMLHttpRequest不能跨域请求资源?
    HTTP/2:如何提升网络速度
    HTTP/1:HTTP性能优化
    WebComponent:像搭积木一样构建Web应用
    winform 保存文件 打开文件 选择文件 字体样式颜色(流 using System.IO;)
  • 原文地址:https://www.cnblogs.com/z_lb/p/2793105.html
Copyright © 2020-2023  润新知