关于Jquery ajax请求Web服务接口服务的方法

关于Jquery ajax请求Web服务的方法

 

Ajax请求Web服务的格式如下：

$.ajax({
type: "POST",
//注明 返回Json
contentType:"application/json;utf-8",
//CollegeDepartWebServices.asmx web服务名 /GetCollegeDepart 方法名
url:"CollegeDepartWebServices.asmx/GetCollegeDepart",
//strDepartId 参数名称 collegeId 参数值
data:"{strDepartId:"+collegeId+"}",
dataType:"json",
success:function(result){          
  var json=null
   try
    {
    if(result)
    {
      //因为返回的是ArrayList 所以循环取出其中的值
      $.each(result, function(i, n){
      //ddlDepart 为下来菜单。循环的向下拉菜单中添加新的选项
      ddlDepart.options[ddlDepart.length]=new Option(n.CollegeDepartTitle,n.CollegeDepartId);
      });
    }
    }
    catch(e)
    {
     alert("错误>>"+e.message);
     return;
    }
   },
   error:function(data)
   {
   alert(data.status+">>> "+data.statusText);
   }
});

 

完整的例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
            function ReginInfo()
            {
                $.ajax({
                    type: "post", //访问WebService使用Post方式请求
                    url: "http://localhost/testWebService.asmx/ZcCreate", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
                    data: "{appyhs:'user',apppmms:'123456'}",
                    contentType: "Application/Json", // 发送信息至服务器时内容编码类型
                    beforeSend: function(XMLHttpRequest) {
                       XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
                    },
                    success: function(data) {
                        var jsonValue = JSON.stringify(data.d);
                        jsonValue= jsonValue.replace("\"","").replace("\"","");
                        if(jsonValue=="OK")
                        {
                            alert("用户注册成功！");
                            // window.location.href='login.html';
                        }
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                    }
                });
                  
            }
        </script>
</head>
<body  style="padding: 0; ">
<div class="zcnr">
    <h1 class="logo2"><a href=""><img src="images/logo2.png"/></a></h1>
    <div class="edtnr">
    <!-- <h1>基本信息</h1> -->
    <form>
        <ul>
            <li>
                <i class="zby1"></i><input name="" id='TxtXq'   type="text" class="zby1" placeholder="小区名称(通过身份验证关联)"   />
            </li>
            <li>
                <i class="zby1"></i><input name="" id='TxtPwd1' type="password" class="zby1" placeholder="密码" />
            </li>
            </form>
            <li>
                <input type="button" id='reg' class="btn3" value="注册" onclick="ReginInfo();"/>    
            </li>
        </ul>
    </div>
    
    <input type="text" id="TxtId" style="width:1rem; display:none;">
    <a href="login.html"><h4>已有账号？登录</h4></a>
</div>
</body>
</html>

这里必须注意：

      如上图，Data中的Json 参数必须全部出现，可以为空值，但是不能省略，切记!!!

posted @ 2022-02-11 00:12  高山流水学编程  阅读(192)  评论(0)  编辑  收藏  举报