通过几天的研究效果，如果在vs2010工具上通过webservice还是比较简单的，毕竟是一个项目。

如果您想通过HTML5 做出来的移动APP去访问c#做出来的webservice，那么就没那么简单了，应为不是一个项目，而且部署到外网服务器上以后数据跨域访问。

自己琢磨了两三天，还搞了一台腾讯云服务器来测试，测试没问题，具体操作，直接看代码。

HBuilder 前端html代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="css/index.css"/>

    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

    <script type="text/javascript" src="js/index.js" ></script>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<body>

    <header class="mui-bar mui-bar-nav">

        <h1 class="mui-title">测试 Ajax 调用云端WebServices</h1>

    </header>

    <div class="mui-content">

        <div id="">

            <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" onclick="dbOnclick1()">Ajax WebServices按钮</button>

        </div>

        <div id="">

            <div class="mui-input-row">

                <label>name</label>

                <input type="text" id="txt-name" placeholder="请输入您的姓名">

            </div>

            <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" onclick="dbOnclick2()">带参数Ajax WebServices按钮</button>

        </div>

        <div id="divRes">

        </div>

        <p><br>按钮1，直接获取webservices接口的返回值</p>

        <p>按钮2，传输用户输入的内容后，获取webservices接口的返回值</p>

        <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="dbOnclick3()">按钮</button>

    </div>

    <nav class="mui-bar mui-bar-tab">

        <a class="mui-tab-item mui-active">

            <span class="mui-icon mui-icon-home"></span>

            <span class="mui-tab-label">首页</span>

        </a>

        <a class="mui-tab-item">

            <span class="mui-icon mui-icon-phone"></span>

            <span class="mui-tab-label">电话</span>

        </a>

        <a class="mui-tab-item">

            <span class="mui-icon mui-icon-email"></span>

            <span class="mui-tab-label">邮件</span>

        </a>

        <a class="mui-tab-item">

            <span class="mui-icon mui-icon-gear"></span>

            <span class="mui-tab-label">设置</span>

        </a>

    </nav>

</body>

</html>

HBuilder 前端js代码

/// <reference path="jquery-2.1.0.js" />

//function ajaxOn() {

var urlStr1="http://118.89.27.204:8080/WebService1.asmx/HelloWorld";

var urlStr2="http://118.89.27.204:8080/WebService1.asmx/HelloWorldName";

//

//

function dbOnclick1(){

　　　　　　jQuery.support.cors = true; //IE10以下

        $.ajax({

            type: "post",

            url: urlStr1,

            dataType: 'xml',

            //data: { inputStr: 'everyone' },

            success: function (data) {

                   document.getElementById("divRes").innerText=data.lastChild.textContent;

            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {

                console.log(XMLHttpRequest);

                alert('error:' + errorThrown);

            }

        });

}

function dbOnclick2(){

　　　　　　jQuery.support.cors = true; //IE10以下

        $.ajax({

            type: "post",

            url: urlStr2,

            dataType: 'xml',

            data: { name: $("#txt-name").val() },

            success: function (data) {

                document.getElementById("divRes").innerText=data.lastChild.textContent;

            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {

                console.log(XMLHttpRequest);

                alert('error:' + errorThrown);

            }

        });

}

C# webservices代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

namespace WebApplication2

{

    /// <summary>

    /// WebService1 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

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

    [System.Web.Script.Services.ScriptService]

    public class WebService1 : System.Web.Services.WebService

    {

        [WebMethod]

        public string HelloWorld()

        {

            //注意这句，跨域的关键

            Context.Response.AddHeader("Access-Control-Allow-Origin", "*");

            return "Hello World \r\n 这是一个不带参数的webservices方法";

        }

        [WebMethod]

        public string HelloWorldName(string name)

        {

            //注意这句，跨域的关键

            Context.Response.AddHeader("Access-Control-Allow-Origin", "*");

            return name + "  Hello World \r\n 这是一个带参数的webservices方法";

        }

    }

}

如果还是不能获取到webservices服务的数据可以尝试修改配置文件“Web.config”

<?xml version="1.0" encoding="utf-8"?>

<!--

  有关如何配置 ASP.NET 应用程序的详细信息，请访问

  http://go.microsoft.com/fwlink/?LinkId=169433

  -->

<configuration>

  <system.web>

    <compilation debug="true" targetFramework="4.0" />

    <customErrors mode="Off"/>

    <webServices>

      <protocols>

        <add name="HttpSoap"/>

        <add name="HttpPost"/>

        <add name="HttpGet"/>

        <add name="Documentation"/>

      </protocols>

    </webServices>

  </system.web>

</configuration>

手机测试图片

          

其他条码知识 请访问：http://www.ybtiaoma.com ,本文仅供参考，请勿转载，谢谢

　　

html5 app开发实例 Ajax跨域访问C# webservices服务的更多相关文章

  1. Hbuilder编辑App时，ajax跨域访问失败问题

    今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...

  2. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  3. ajax跨域访问的解决方案

    今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...

  4. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  5. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  6. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  7. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  8. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

随机推荐

  1. [亂數] <細說> C/C++ 亂數基本使用與常見問題

    陸陸續續寫了 EA  一.二年,以前亂數引導文回頭看時才發現,怎麼有這麼多細節的錯誤.沒系統. 這篇文章主要引導初學者使用亂數,同時附上常被翻出來討論的議題,C/C++適用,唯以 C 語言撰之. 也由 ...

  2. nfs使用教程

    服务端 配置说明 文件名 /etc/exports 格式 <输出目录> [客户端 (访问权限,用户映射,其他) ] [客户端 (访问权限,用户映射,其他) ] 格式说明 输出目录:NFS系 ...

  3. SAS笔记(2) RETAIN语句

    本文重点: 使用RETIAN,INPUT在每次循环执行时保留上一次PDV中的变量值. SUM语句和SET语句会自动RETAIN变量. 1. RETAIN语句 1.1 Example 1 先来看看在DA ...

  4. CodeForces 106C 【DP】

    题意: n g dough  m种商品? 每种有ai stuffing, 拿bi stuffing + ci dough -> di tugriks rest c0 dough -> d0 ...

  5. npm install 权限问题

    npm ERR! Error: EACCES: permission denied, access '/Users/Lobin/work/note-vue/node_modules/@babel/hi ...

  6. QPS，TPS，吞吐量，响应时间详解及关系

    并发数 并发数是指系统同时能处理的请求数量,这个也是反应了系统的负载能力 吞吐量吞吐量是指单位时间内系统能处理的请求数量,体现系统处理请求的能力,这是目前最常用的性能测试指标 响应时间RT(Respo ...

  7. 关于webpack的版本导致的postcss-loader的问题

    来源自问题 https://segmentfault.com/q/1010000006987956 !!!发现这解决方案还是不能用,估计是webpack又更新了一轮,请看看下下方的答案 某个版本web ...

  8. 8、kvm虚拟机添加硬盘

    kvm虚拟机添加硬盘qemu-img创建一块新的硬盘 qemu-img create -f qcow2 /kvm-data/kvm/jumperhost_disk1.qcow2 50G 关闭虚拟机 v ...

  9. spring /* 和 /** 的 区别。

    例如 /** 拦截 /index/1   和  /index /* 代表 /index/1 而  /index 则不会被拦截

  10. P2161 [SHOI2009]会场预约 （线段树：线段树上的不重复覆盖数）

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...