Javascript 如何获取文本字段值并通过Web服务发送值_Javascript_Jquery_Asp.net Mvc

Javascript 如何获取文本字段值并通过Web服务发送值

javascript jquery asp.net-mvc

Javascript 如何获取文本字段值并通过Web服务发送值,javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,当用户单击按钮时，我需要将以下文本字段的值提交到位于/TestService/SaveMethod的Web服务 <div class="content"> @Html.TextBoxFor(mo => mo.id, new { id = "id" }) <input type="text" id="fname" name="fname" />

当用户单击按钮时，我需要将以下文本字段的值提交到位于

/TestService/SaveMethod

的Web服务

 <div class="content">
                  @Html.TextBoxFor(mo => mo.id, new { id = "id" })     
                 <input type="text" id="fname" name="fname" />     
                <input type="submit" value="send" class="save"/>

        </div>

您不需要jQuery，除非您明确地想要使用它，而且对于ajax也是如此。只需在html中添加一个表单，如：

 <div class="content">
   @using(Html.BeginForm("SaveMethod","TestService",new{},FormMethod.Post,new{}){
    @Html.TextBoxFor(mo => mo.id, new { id = "id" },new{})     
    <input type="text" id="fname" name="fname" />     
    <input type="submit" value="send" class="save"/>
   }
  </div>


@使用（Html.BeginForm（“SaveMethod”、“TestService”、new{}、FormMethod.Post、new{}）{
@TextBoxFor（mo=>mo.id，new{id=“id”}，new{}）
}

您可以使用val（）方法访问脚本中的textfield值，然后使用ajax post将该值发送到webservice

$(function () {
    $('.save').click(function () {  

 var name = $("#taYourName").val();
        $.ajax(
        {
            Type: "POST",
            contentType: "application/xml",
            url: "YourNameIs.asmx/YourName",
            data: { yourName: name },
            success: function (msg) {
                $("#lblForAjax").text(msg);
            }
        });


});
});

应该是这样的：它会给你名字值

$(function () {
    $('.save').click(function ()
    {
        var name = $("#fname").val();
    });
});

您可以使用jQueryAjax来实现这一点。这是一段经过测试的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test webservices</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

    <script>
        $(document).ready(function () {
            $('#submit').click(function (e) {
                e.preventDefault();
                var x = $('#myval').val();
                $.ajax({                                      
                    url: 'webservice.php', 
                    type: 'GET',
                    contentType: 'text/html',
                    dataType: 'text',
                    data:  {
                         data : x
                    },
                    success: function(response)
                    {
                        alert("data send to webservice");
                    },
                    error: function (response) 
                    {
                    },
                });         
            });
        });

    </script>
</head>
<body>
    <form action='' method='get'>
        <input type='text' name='myval' id='myval' >
        <input type='submit' value='Go' id='submit' >
    </form>

</body>
</html>


测试Web服务
$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
var x=$（'#myval'）.val（）；
$.ajax（{
url:'webservice.php'，
键入：“GET”，
contentType:'text/html'，
数据类型：“文本”，
数据：{
数据：x
},
成功：功能（响应）
{
警报（“数据发送到Web服务”）；
},
错误：函数（响应）
{
},
});         
});
});

我希望这将解决您的问题。

好的，那么如果操作成功或失败，我将如何获得服务器响应？您可以根据您获得的响应显示响应，我是指标题信息。但是，请保留这一点，然后使用ajax。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test webservices</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

    <script>
        $(document).ready(function () {
            $('#submit').click(function (e) {
                e.preventDefault();
                var x = $('#myval').val();
                $.ajax({                                      
                    url: 'webservice.php', 
                    type: 'GET',
                    contentType: 'text/html',
                    dataType: 'text',
                    data:  {
                         data : x
                    },
                    success: function(response)
                    {
                        alert("data send to webservice");
                    },
                    error: function (response) 
                    {
                    },
                });         
            });
        });

    </script>
</head>
<body>
    <form action='' method='get'>
        <input type='text' name='myval' id='myval' >
        <input type='submit' value='Go' id='submit' >
    </form>

</body>
</html>