本来是用的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太长的问题;的更多相关文章

  1. 开发程序过程中遇到的调用Web Api小问题

    在用Umbraco Web Api开发程序时,前端使用React调用Web Api 当时是有一个页面Search.cshtml,把用React产生的脚本代码,在这个页面进行引用 写了一个Api, 调用 ...

  2. ASP.NET MVC4中调用WEB API的四个方法

    http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml [IT168技术]当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各 ...

  3. WebApi系列~通过HttpClient来调用Web Api接口

    回到目录 HttpClient是一个被封装好的类,主要用于Http的通讯,它在.net,java,oc中都有被实现,当然,我只会.net,所以,只讲.net中的HttpClient去调用Web Api ...

  4. 通过HttpClient来调用Web Api接口

    回到目录 HttpClient是一个被封装好的类,主要用于Http的通讯,它在.net,java,oc中都有被实现,当然,我只会.net,所以,只讲.net中的HttpClient去调用Web Api ...

  5. ajax调用.net API项目跨域问题解决

    ajax调用.net API项目,经常提示跨域问题.添加如下节点代码解决:httpProtocol <system.webServer> <handlers> <remo ...

  6. jQuery跨域调用Web API

    我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html.有朋友说开发是会开发了,但不知道怎么调用啊? ...

  7. Identity Server 4 从入门到落地(五)—— 使用Ajax访问Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  8. Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口

    1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...

  9. React Native教程 - 调用Web API

    react-native官网Fetch介绍:https://facebook.github.io/react-native/docs/network.html#content react-native ...

随机推荐

  1. centos SSH配置详解

    基本概念  linux自带的ssh为OpenSSH ssh协议提供两种用户认证方式  1. 基于口令的安全认证:使用用户名.密码的方式对登录用户进行认证 2. 基于密钥的安全认证:使用公钥和私钥对的方 ...

  2. sjtu1590 强迫症

    Description BS96发布了一套有\(m\)个band柄绘的新badge,kuma先生想要拿到04的badge于是进行了抽抽抽. kuma先生一共抽了\(n\)个badge.他把所有的bad ...

  3. [转载]C#图片格式(JPG,BMP,PNG,GIF)等转换为ICO图标

    using System; using System.Drawing; using System.Windows.Forms; using System.IO; namespace ICOTest { ...

  4. PHP漏洞全解(三)-客户端脚本植入

    本文主要介绍针对PHP网站的客户端脚本植入攻击方式.所谓客户端脚本植入攻击,是指将可以执行的脚本插入到表单.图片.动画或超链接文字等对象内.当用户打开这些对象后,黑客所植入的脚本就会被执行,进而开始攻 ...

  5. Java Development Kit (JDK) 发展历程 及新特性

    SE(J2SE),standard edition,标准版,是我们通常用的一个版本,从JDK 5.0开始,改名为Java SE. EE(J2EE),enterprise edition,企业版,使用这 ...

  6. Linux中tty、pty、pts的概念区别

    转自Linux中tty.pty.pts的概念区别 基本概念: 1> tty(终端设备的统称): tty一词源于Teletypes,或者teletypewriters,原来指的是电传打字机,是通过 ...

  7. 类型<T> where T:class的用法

    public void Delete<T>(List<T> EntityList) where T : class, new() 就是说T必须是一个类(class)类型,不能是 ...

  8. Android 编译大全

    http://quanminchaoren.iteye.com/blog/840917

  9. 【HDOJ】2828 Lamp

    DLX简单题目. /* */ #include <iostream> #include <sstream> #include <string> #include & ...

  10. git checkout

        git checkout <branch_name> <file> 检出具体分支上的 具体文件    git checkout  --merge <branch_ ...