您的位置：首页 > Web前端 > JQuery

静态页面jquery+ajax调用.net发布的webservice

2018-01-22 13:53 246 查看

一、.net发布webservice并发布到IIS请自行百度。这里不多介绍。

下面是webservice中的一个测试方法

namespace WebApplication1

{

/// <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]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public void GetAge(string name,string pwd)

{

JavaScriptSerializer js = new JavaScriptSerializer();

User data = new User();

data.Name = name;

data.Pwd = pwd;

data.Age= new Random().Next(10, 41);

Context.Response.Write(js.Serialize(data));

Context.Response.End();

}

}

public class User

{

public string Name { get; set; }

public string Pwd { get; set; }

public int Age { get; set; }

}

}

这里需要在web.config中做处理。代码如下：对应着改一下就可以了。

<configuration>

<system.web>

<webServices>

<protocols>

<add name="HttpSoap"/>

<add name="HttpPost"/>

<add name="HttpGet"/>

<add name="Documentation"/>

</protocols>

</webServices>

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

</system.web>

<system.webServer>

<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>

</system.webServer>

</configuration>

二、在IIS运行成功的基础上

新建一个静态页面代码如下（我用的是txt写的）：需要注意的是。url是你在iis运行的时候那个地址

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>登录验证</title>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('#btn').click(function(event) {
$.ajax({
url: 'http://-----------/WebService1.asmx/GetAge',
type: 'POST',
dataType: 'json',
data:{
name: $('#username').val(),
pwd: $('#pwd').val()
},
success: function(data){
console.log(data);
}
});
});
});
</script>

</head>

<body>
<input type="text" id="username"><br>
<input type="password" id="pwd"><br>
<button id="btn">登录</button>

</body>

</html>

三、把txt文件保存成html格式的文件，用浏览器打开，输入框输入内容，调试一下。

如果出现问题，请自行百度，本人就是经过看了很多博客之后才搞订的了。。。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 静态页面调webservice

相关文章推荐

新的分享

章节导航