Ajax访问远程WebService 配置文件、编码工作注意

今天就一次接触webService，走了好多弯路，记录下正确的配置、编码。

一、服务端：

1.webService代码段

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]

[WebMethod(Description ="返回StudentModel实体集合")]
public List<StudentModel> HelloWorld()
{
List<StudentModel> stuList = new List<StudentModel>();
StudentModel stu = new StudentModel()
{
name = "张三",
isMan = true,
age = 10
};
StudentModel stu_1 = new StudentModel(){
name = "李四",
isMan = false,
age = 13
};
stuList.Insert(0,stu);
stuList.Insert(1,stu_1);
return stuList;
}

2..配置文件《很重要！！！》

     <system.web>
      <compilation debug="true" targetFramework="4.0" />
      <httpModules>
          <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule,Microsoft.AI.Web" />
      </httpModules>


      <!--运行远程调用的配置-->
      <span style="color:#3366ff;"><webServices>
        <protocols>
          <add name="HttpSoap"/>
          <add name="HttpPost"/>
          <add name="HttpGet"/>
          <add name="Documentation"/>
        </protocols>
      </webServices></span>
      
    </system.web>

<system.webServer>


      <!--运行远程调用的配置-->
      <span style="color:#3366ff;"><httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
          <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
          <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
      </httpProtocol></span>


      <validation validateIntegratedModeConfiguration="false" />
        <modules>
            <remove name="ApplicationInsightsWebTracking" />
            <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule,Microsoft.AI.Web" preCondition="managedHandler" />
        </modules>

二、客户端

1.js+html

<script>
    $(function () {
        $("#btnArray").click(function () {
            $.ajax({
                type: "POST",contentType: 'application/json',url: "http://127.0.0.1:6001/WebService1.asmx/HelloWorld",//http://?jsoncallback=?
                //data: "{'i':10}",//<span style="color:#ff6666;">如果需要参数，变量必须加上''</span>
                dataType:"json",success: function (result) {
                    var htmlStr = "";
                    for (var i = 0; i < result.d.length; i++) {
                        htmlStr += "姓名：" + result.d[i].name + "，年龄：" + result.d[i].age + "  ";
                    }
                    alert(htmlStr);
                },error: function (xhr,msg) {
                    alert("出错了:"+msg);
                }
            });
        });
    })
</script>

<button id="btnArray">我是GetInt</button>

2.演示效果：

<img src="http://img.blog.csdn.net/20161003162834817?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</system.webServer>

Ajax访问远程WebService 配置文件、编码工作注意

相关文章