用Ajax調用web api,解決URL太長的問題;

來源:互聯網
上載者:User

標籤:傳輸   upd   local   pen   ted   reg   style   form   element   

本來是用的WCF,但是服務需要多種方式調用(後台+前端Ajax),最終局面就是我在WCF每個服務中都判斷一下↓

            #region 解決接收不到Ajax中傳來的參數...            if (jsonParames == null && HttpContext.Current.Request.QueryString["參數"] != null)                jsonParames = HttpContext.Current.Request.QueryString["參數"];            else if (jsonParames == null && HttpContext.Current.Request.QueryString["參數"] == null)                return JSON.Instance.ToJSON("{\"ret\":\"0\",\"msg\":\"參數為空白.\"}");            #endregion

 但是Ajax中用QueryString傳輸資料的話,有長度限制。

找了下,還有人說可以用form來解決提交的

<form id=‘form0‘ method=‘POST‘ action=‘http://localhost:22377/api/Article_/Article_Update/‘ onsubmit = "set_v()"><input id=‘id_v‘ type=‘hidden‘ value=‘value_default‘ name=‘jsonParames‘/><input type="submit" value="XXX" class=""  /></form>

不過提交完了之後直接就會將頁面跳轉到‘action‘所指向的頁面。。。

 

最後還是決定再發布一個web api,然後用Ajax來解決

    <form id="form1">        <div>            ID:<input type="text" id="id_ID" />            <br />            <input type="button" value="POST" id="getPersons" />        </div>        <div id="ret">        </div>    </form>    <script type="text/javascript">            function set_v(){    alert(‘set value!‘);    var v = ‘too long data .‘;    document.getElementById("id_v").value = v;    alert(document.getElementById("id_v").val());    }        $(‘#getPersons‘).click(function () {            document.getElementById("ret").innerHTML = ‘‘;//清楚上次查詢內容...            var ID = $("#id_ID").val();            $.ajax({                type: ‘POST‘,                url: ‘http://localhost:22377/api/Article_/Article_Update‘,//?jsonParames=‘ + jsonParames,                //dataType: ‘JSONP‘,//如果這行不注釋請求的‘type‘就是GET,(哪怕第一行就規定了type:‘POST‘)                //contentType:"application/json; charset=utf-8;",//這行不注釋說不允許跨域調用!!!                data: {                    "jsonParames": ‘{"id":"0"}‘//jsonParames和web api中的參數名對應;                },                success: function (_data) {                    alert(_data);                    var info = eval(‘(‘ + _data + ‘)‘);                    //alert(data);                    var list = eval(‘(‘ + info.list + ‘)‘);                    var fragment = document.createDocumentFragment();                    $.each(list, function (i, field_list) {                        $.each(field_list, function (i, field) {                            var item = document.createElement("li");                            item.appendChild(document.createTextNode(‘[‘ + i + ‘]‘ + ‘...‘ + field));                            fragment.appendChild(item);                            //alert(i + "...is..." + field);                        })                    })                    $("#ret").append(fragment);                },                error: function () { }            });        });    </script>

 web api 中;

        [HttpPost, HttpGet]        public string Article_Update([FromBody]string jsonParames)        {            if (string.IsNullOrEmpty(jsonParames) || jsonParames.ToLower() == "jsonparames")            {                jsonParames = System.Web.HttpContext.Current.Request.Form["jsonParames"];            }            return "xx";}

 

用Ajax調用web api,解決URL太長的問題;

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.