通过几天的研究效果,如果在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. Java 课上的语录

    Java 课上的语录 在用系统类库的类的时候啊,你是不是充分的理解这个系统类库的类.比如这个 ArrayList 你是不是知道它里面有这样那样这样那样的函数,能够帮你做各种各样的事情.很重要,你不知道 ...

  2. MYSQL MYSQLI PDO

    PHP的MySQL扩展(优缺点) 设计开发允许PHP应用与MySQL数据库交互的早期扩展.mysql扩展提供了一个面向过程 的接口: 并且是针对MySQL4.1.3或更早版本设计的.因此,这个扩展虽然 ...

  3. ZOJ - 3777(状压dp)

    The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem setter, Edward i ...

  4. HBase HA + Hadoop HA 搭建

    HBase 使用的是 1.2.9 的版本.  Hadoop HA 的搭建见我的另外一篇:Hadoop 2.7.3 HA 搭建及遇到的一些问题 以下目录均为 HBase 解压后的目录. 1. 修改 co ...

  5. docker-compose搭建wordpress[转]

    1.安装docker-compose apt-get install docker-compose 发现下载的是旧版本,不支持2.0的配置文件 还是下载新版本吧,去github查看最新版本https: ...

  6. scapy框架

    性能相关 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时必然会引起等待,从而使得请求整体变慢. import requests def fetch_async(url): ...

  7. linker 错误解决办法 地图

  8. NYOJ542-试制品

    题目链接:点击打开链接 试 制 品 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描述 ZZ大学的Dr.Kong最近发现实验室的很多试制品都已经用完.由于项目经费有限,为了节省 ...

  9. DHCP DHCPv6

    为了给网络客户机自动分配IP地址以及生成所需的配置参数,IETF分别给IPV4和IPV6网络定义了相关的协议标准,即DHCP(RFC2131)和DHCPV6(RFC3315),以及扩充的选项标准.本文 ...

  10. 消息中间件 | 消息协议 | AMQP -- 《分布式 消息中间件实践》笔记

    04年,AMQP开放标准被开发 06年,AMQP规范被发布   基本概念     Message:与平台无相关的数据.     Publisher:向交换器发布消息的客户端应用程序     Excha ...