前端調(diào)用

前端

html

<div class="row">
    <form id="queryForm">
        <input name="id" type="text" />
        <input name="name" type="text" />
    </form>
</div>

<div class="row">
    <div class="panel panel-warning">
        <div class="panel-heading">Get</div>
        <div class="panel-body">
            <a class="btn btn-primary" id="btn1">無(wú)參</a>
            <a class="btn btn-primary" id="btn2">1個(gè)參數(shù)</a>
            <a class="btn btn-primary" id="btn3">2個(gè)參數(shù)</a>
            <a class="btn btn-primary" id="btn4">實(shí)體參數(shù)1 <span class="label label-warning">[FromUri]</span></a>
            <a class="btn btn-primary" id="btn5">實(shí)體參數(shù)2 <span class="label label-warning">（傳遞反序列化）{ 參數(shù): JSON.stringify(json) }</span></a>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">post</div>
        <div class="panel-body">
            <p>
                <div>
                    <input name="postsubmit" type="text"/>
                </div>
            </p>
            <p>
                <a class="btn btn-success" id="postbtn1">
                    1個(gè)參數(shù)
                    <span class="label label-danger">key為空</span>
                </a>
                <a class="btn btn-success" id="postbtn2">
                    1個(gè)json
                    <span class="label label-danger">（傳遞序列化）傳遞：JSON.stringify({ id: 1, pass: '123', name: "tangsansan" })，接收：實(shí)體，</span>
                    <span class="label label-warning">contentType: 'application/json'</span>
                </a>
            </p>
            <p>
                <a class="btn btn-success" id="postbtn5">
                    1個(gè)表單
                    <span class="label label-danger">（傳遞序列化）傳遞：JSON.stringify($('#queryForm').serialize())，接收：dynamic，</span>
                    <span class="label label-warning">contentType: 'application/json'</span>
                </a>
                <a class="btn btn-success" id="postbtn6">
                    1個(gè)表單
                    <span class="label label-danger">傳遞：$('#queryForm').serialize()，接收：實(shí)體</span>
                </a>
            </p>
            <p>
                <a class="btn btn-success" id="postbtn7">
                    1個(gè)復(fù)雜json
                    <span class="label label-danger">（傳遞序列化）傳遞：{ "User": "{ id: 1, pass: '123', name: "tangsansan" }", "Info": "info" }，接收：JObject</span>
                </a>
            </p>
        </div>
    </div>
</div>

js

<script>
    var $queryform = { id: 1, pass: '123', name: "tangsansan" }

    $(function () {
        //get傳遞無(wú)參
        $('#btn1').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/GetList',
                type: 'get',
                success: function (data) {
                    alert(data)
                }
            });
        });
        //get傳遞1個(gè)參數(shù)
        $('#btn2').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/Get',
                type: 'get',
                data: { id: 1 },
                success: function (data) {
                    alert(data)
                }
            });
        });
        //get傳遞2個(gè)參數(shù)
        $('#btn3').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/GetList',
                type: 'get',
                data: { id: 1, pass: 'aa' },
                success: function (data) {
                    alert(data)
                }
            });
        });

        //get傳遞實(shí)體1 [fromurl]
        $('#btn4').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/GetUserList',
                type: 'get',
                data: $queryform,
                success: function (data) {
                    alert(data)
                }
            });
        });

        //get傳遞實(shí)體2 JSON.stringify字符串
        $('#btn5').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/UserJsonList',
                type: 'get',
                data: { userJson: JSON.stringify($queryform) },
                success: function (data) {
                    alert(data)
                }
            });
        });
        
        //post傳遞一個(gè)參數(shù)
        $('#postbtn1').on('click', function () {
            var $posttext = $('input[name=postsubmit]').val();
            $.ajax({
                url: 'http://localhost:809/api/Values/PostOne',
                type: 'post',
                //data: { "value": $posttext }, //key=value,但后臺(tái)接收為空
                data: { "": $posttext },  //key為空
                success: function (data) {
                    alert(data);
                }
            });
        });

        //post傳遞json字符串
        $('#postbtn2').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/PostTwoForm',
                type: 'post',
                contentType: 'application/json',     //必須加上，聲明為json
                data: JSON.stringify($queryform),    
                success: function (data) {
                    alert(data);
                }
            });
        });

        //post傳遞一個(gè)表單
        //通過(guò)dynamic動(dòng)態(tài)類(lèi)型能順利得到多個(gè)參數(shù)，省掉了[FromBody]這個(gè)累贅，
        //并且ajax參數(shù)的傳遞不用使用"無(wú)厘頭"的{"":"value"}這種寫(xiě)法，
        //有一點(diǎn)需要注意的是這里在ajax的請(qǐng)求里面需要加上參數(shù)類(lèi)型為Json，即 contentType: 'application/json', 這個(gè)屬性。
        $('#postbtn5').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/PostOneForm',
                type: 'post',
                contentType: 'application/json',     //必須加上，聲明為json
                 data: JSON.stringify($('#queryForm').serialize()),
                 success: function (data) {
                    alert(data);
                }
            });
        });
        
        //post傳遞一個(gè)表單
        $('#postbtn6').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/PostTwoForm',
                type: 'post',
                data: $('#queryForm').serialize(),
                success: function (data) {
                    alert(data);
                }
            });
        });

        //post傳遞復(fù)雜json字符串
        $('#postbtn7').on('click', function () {
            $.ajax({
                url: 'http://localhost:809/api/Values/PostThreeeForm',
                type: 'post',
                data: { "User": $queryform, "Info": "info" },
                success: function (data) {
                    alert(data);
                }
            });
        });

    });
</script>

后臺(tái)

public class ValuesController : ApiController
    {
        [HttpGet]
        public IEnumerable<string> GetList()
        {
            return new string[] { "value1", "value2" };
        }

        [HttpGet]
        public string Get(int id)
        {
            return "value";
        }

        [HttpGet]
        public IEnumerable<string> GetList(int id, string pass)
        {
            return new string[] { id.ToString(), pass.ToString() };
        }

        //Get傳參：實(shí)體，必須添加 FromUri
        [HttpGet]
        public string GetUserList([FromUri]User user)
        {
            return string.Format("id:{0},name:{1},pass:{2}", user.id.ToString(), user.name, user.pass);
        }

        [HttpGet]
        public string UserJsonList(string userJson)
        {
            User user = JsonConvert.DeserializeObject<User>(userJson);
            return string.Format("id:{0},name:{1},pass:{2}", user.id.ToString(), user.name, user.pass);
        }

        // POST api/values
        [HttpPost]
        public string PostOne([FromBody]string value)
        {
            return value;
        }

        //一個(gè)表單（一個(gè)json）
        [HttpPost]
        public string PostOneForm(dynamic value)
        {
            string user = Convert.ToString(value);
            return user;
        }

        //一個(gè)表單（一個(gè)實(shí)體）
        [HttpPost]
        public string PostTwoForm(User user)
        {
            //Dictionary<string, object> objects = GetRequest();

            return string.Format("id:{0},name:{1},pass:{2}", user.id.ToString(), user.name, user.pass);
        }

        [HttpPost]
        public string PostThreeeForm(JObject jObject)
        {
            //Dictionary<string, object> objects = GetRequest();
            string username = HttpContext.Current.Request.Form["User[name]"];
            dynamic json = jObject;
            JObject User = json.User;
            User user = User.ToObject<User>();
            //Dictionary<string, object> objects = GetRequest();

            return string.Format("id:{0},name:{1},pass:{2}", user.id.ToString(), user.name, user.pass);
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }

        /// <summary>
        /// 獲取所有參數(shù)   
        /// </summary>
        /// <returns>
        ///     A System.Collections.Generic.Dictionary<string,object> value...
        /// </returns>
        public Dictionary<string, object> GetRequest()
        {
            var getrequest = HttpContext.Current.Request.Form;
            Dictionary<string, object> dict = new Dictionary<string, object>();

            for (int i = 0; i < getrequest.AllKeys.Length; i++)
            {
                dict.Add(getrequest.GetKey(i), getrequest[i]);
            }
            return dict;
        }
    }