使用ajax将数据从html表单传递到c#webservice

时间:2016-03-26 17:27:41

标签: c# jquery html ajax web-services

我在phpstorm中使用bootstrap创建了一个表单html,我想使用ajax将信息传递给c#webservice。 我对ajax url(代表如下)的内容有所怀疑。

这是我的html / bootstrap表单:

<form role="form" action="" method="post" class="login-form">
  <div class="form-group">
    <label class="sr-only" for="form-username">Email</label>
    <input type="text" name="form-username" placeholder="Email....." class="form-username form-control" id="form-email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="form-text">Type Order</label>
    <input type="text" name="order" placeholder="Tipo Encomenda" class="form-text form-control" id="textbox1">
  </div>
  <span id="spnGetdet" style="font-size:x-large" />
  <div class="form-group">
    <label class="sr-only" for="form-number">Number</label>
    <input type="number" min="0" max="150" name="orderQuantity" placeholder="Numero Peças" class="form-number form-control" id="form-number">
  </div>
  <div class="form-group">
    <label class="sr-only" for="form-radio">Urgente</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Urgente</label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Não Urgente
    </label>
  </div>
  <button type="submit" class="btn btn-primary" id="submitOrder">Enviar</button>
</form>

这是我的ajax / jquery代码:

<script type="text/javascript">
    $("#submitOrder").click(function(){
        $(document).ready(function () {
            var TextBox1 = $("#textbox1");
            TextBox1.change(function (e) {
                var Name = TextBox1.val();
                if (Name != -1) {
                    Getdet(Name);
                }else {
                    <?php echo "erro"?>;
                }
            });
        });
    }

    function Getdet(Name) {
        $.ajax({
            type: "POST",
            url: "",
            data: "{'Custname':'" + Name + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response){
                $("#spnGetdet").html(response.d);
            },
            failure: function (msg)
            {
                alert(msg);
            }
        });
    }
</script>

最后我的c#webservice(这是一个测试,我只想收集订单的类型):

    [WebMethod]
    public String GetCustdet(string Custname)
    {
        return Custname;
    }

所以,如果我有在phpstorm和webservice visual studio中制作的项目(网站),我需要在ajax的url中放入什么才能到达Web服务?

P.S:在xampp中运行的WebSite

1 个答案:

答案 0 :(得分:0)

我假设你正在使用MVC模式我已经给出了以下网址。您应该在[控制器]位置替换控制器名称。您应该将localhost:5566替换为[server-name]中的任何内容。

选项1:[获取] http://[server-name]/[controller]/GetCustdet?Custname=Jhon 没有数据。

选项2:[POST] http://[server-name]/[controller]/GetCustdet 数据:'{Custname:“Jhon”}'

否则,如果您使用Asp.Net模板创建WebMethod,则应使用aspx页面名称代替[controller]。

或者,您可以使用路由配置来自定义URL和数据。