如何使用JQuery在HTML页面中调用webservice?

时间:2014-07-13 12:43:45

标签: c# javascript html ajax web-services

我有WebService获得2个字符串,如果它们等于

则返回

http://192.168.100.MyIP/HTML_SIMPLE_TEST/

中的WebService
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
     [WebMethod(Description = "Validate the login credentials")]
     public bool Validate(string UserName, string Password)
     {
          if (Password == "test" && UserName == "test")
              return true;
          else
              return false;
     }
}

我有调用此WebService的html页面,需要返回结果

<html  lang="en-US">
    <head>
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">

        var Surl = "http://localhost:3031/WS_HTML/Service1.asmx/Validate";

        $(document).ready(function () {
            $("input#submit").click(function (event) {
                //var uid = document.getElementById("UserName").value;
                //var pwd = document.getElementById("Password").value;

                var uid = "test";
                var pwd = "test";

                var dataString = "{ 'UserName' : '" + uid + "', 'Password' : '" + pwd + "'}";

                $.ajax({
                    ServiceCallID: 1,
                    url: Surl,
                    type: 'POST',
                    data: dataString,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

                    success: function (result) {
                        returnVal = result.d;
                        alert(returnVal);
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                    }
                });
            });
        });

</script>

</head>
    <body >
        <form method=post runat="server">
            <input  type="submit" />Connet to my WS
        </form>
    </body>
</html>

这是我得到的: enter image description here

我试试这个,还是同样的问题......

<script>
    function XX() {
        alert("in");
        $.post('http://localhost/WS_HTML/Service1.asmx/Validate', { username: 'test', password: 'test' }, function (response) {
            response; // Here is response
            alert(response);
        });
    }
</script>

</head>
    <body >
         <form method=post runat="server">
            <input  type="submit" onclick="XX();" />Connet to my WS2
         </form>
    </body>
</html>

我尝试使用$.get - 同样......没有任何事情发生......

从浏览器中开展工作。如果我这样写:localhost/WS_HTML/Service1.asmx我看到我的WS,

但如果我这样写:localhost/WS_HTML/Service1.asmx/Validate我在浏览器上看到错误=&gt;

无法识别请求格式的网址意外地以&#39; /验证&#39;

结尾。

我向上帝发誓,好几天我都不知道为什么它不起作用

):

感谢,

2 个答案:

答案 0 :(得分:0)

您不必强制使用jQuery来生成Ajax请求。你可以使用标准的javascript(它更高效,你不必为此加载库...)

此外,您不必创建click event来提交表单,您可以创建HTML结构并通过onclick属性提交,效率更高(浏览器内存更少)。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <script type="text/javascript">
            var myUrl = "http://localhost:3031/WS_HTML/Service1.asmx/Validate";

            function submitMyForm(){
                // Define your datas 
                var uid = "test";
                var pwd = "test";
                var dataString = "{ 'UserName' : '" + uid + "', 'Password' : '" + pwd + "'}";

                // Create and send the request
                var request = new XMLHttpRequest();
                request.onreadystatechange = function() {
                    // Log with console.log() or alert if you want...
                    console.log('State of my request changed! ');
                    if (XMLHttpRequest.DONE === request.readyState) {
                        console.log(request.responseText);
                    }
                }
                request.open('POST', myUrl, true);
                request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                request.send(data);
            }
        </script>
    </head>
    <body>
        <form>
            <button onclick="submitMyForm()" >Connect to my WS</button>
        </form>
    </body>
</html>

我发现您在代码中使用了基本的javascript alert(),您可以使用console.log()进行调试(您可以看到文档here)。

对于您的问题,我认为问题不在于您的HTML / Javascript。你看起来正确的jQuery方法。 HTML也是。

我认为您的服务器存在问题,这不是客户端问题。这是一个服务器错误:你可以看到你的HTTP状态代码(405 - &gt;这个HTTP代码的{doumentation here)。

您是否正确配置了服务器?您可以在本网站上或MSDN forum

上找到关于405 method not Allowed - ISS server的信息

希望我帮助你。

答案 1 :(得分:-1)

为什么不使用$ .post()?

$.post('/your/service/url/', {username:'asd', password:'qwe'}, function(response){
    response; // Here is response
});