• JS跨域ajax访问


    方式1:jsonp解决跨域访问

    需要服务和js配合

    服务

    [WebMethod]
            public void HelloWorld2(string name)
            {
                HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
                string jsonCallBackFunName = string.Empty;
                jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString();
                HttpContext.Current.Response.Write(jsonCallBackFunName + "({ "Result": "Helloword2" + name + "" })");
            }

    JS调用

     var dataStr = "name=" + $("#birthday").val();
                    $.ajax({
                        type: "post",
                        url: "http://192.168.0.99:8082/WebService1.asmx/HelloWorld",
                        dataType: "jsonp",
                        jsonp: 'jsoncallback',
                        contentType: "application/jsonp;charset=utf-8",
                        data: dataStr,
                        success: function (result) {
                            //返回结果
                            alert(result.Result);
                            $("#name").val(result.Result);
                        },
                        error: function (e) {
                            window.alert(e.status);
                        }
                    });
                });

    方式2:增加配置处理跨域

    如果是在.net下则在web.config中增加配置

    在system.webServer下增加可跨域访问

     <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
          </customHeaders>
        </httpProtocol>

    如果是调用webservice在服务端config中增加配置在system.web下增加

    <protocols>
            <add name="HttpSoap"/>
            <add name="HttpPost"/>
            <add name="HttpGet"/>
            <add name="Documentation"/>
    </protocols>

    服务

     [WebMethod]
            public string HelloWorld1(string name)
            {
                return "{data:你好:" + name + "}";
            }

    前台调用方式

    $.ajax({
                        type: "post",
                        url: "http://192.168.0.99:8082/WebService1.asmx/HelloWorld",
                        dataType: "json",
                        data: "{name:'" + birthday + "'}",//参数
                        contentType: "application/json;charset=utf-8",
                        success: function (result) {
                            //返回结果  
                            $("#name").val(result.d);
                        },
                        error: function (e) {
                            window.alert(e.status);
                        }
                    });
                });
  • 相关阅读:
    HTTP 方法:GET 对比 POST
    【总结整理】关于写前端页面小技巧
    【总结整理】关于IE6的兼容性
    添加制图图例(转)
    【总结整理】JQuery调试
    【总结整理】关于切图
    【总结整理】JQuery小技巧
    【总结整理】webstorm插件使用
    【总结整理】JQuery基础学习---动画
    初学正则表达式
  • 原文地址:https://www.cnblogs.com/yx007/p/8073264.html
Copyright © 2020-2023  润新知