服务端配置

1：新建一个asp.net的网站

2: 创建一个服务文件：LoginService.asmx

注意:记得取消[System.Web.Script.Services.ScriptService]的注释

因为要使用jsonp来达到跨域访问，所以要声明输出类型和加上callback函数前缀。

using System.Web.Services;

namespace testService

{

    /// <summary>

    /// LoginService 的摘要说明

    /// </summary>

    [WebService(Namespace = "zhexian.com")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

    [System.Web.Script.Services.ScriptService]

    public class LoginService : System.Web.Services.WebService

    {

        [WebMethod]

        public void CheckUserNameExist(string username)

        {

            Context.Response.ContentType = "application/x-javascript";

            string result = username == "kimmy" ? "true" : "false";

            string callBackName = Context.Request.QueryString["callback"];

            Context.Response.Write(callBackName + "({\"isUnique\":\"" + result + "\"})");

        }

    }

}

3：配置web.config

在web.config, <system.web>下，加入字段

 <webServices>

      <protocols>

        <add name="HttpPost"/>

        <add name="HttpGet"/>

      </protocols>

    </webServices>

网页配置

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>入门入门</title>

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">

<style type="text/css">

</style>

</head>

<body ng-app="myApp">

<form name="singnupForm" novalidate ng-submit="signupForm()">

<fieldset>

    <legend>注册</legend>

 <div>

  <div class="row">

      <div class="large-12 columns">

          <input type="text" placeholder="用户名" name="name" ng-model="user.name" ng-minlength="2" ng-maxlength="20" ensure-unique="name"  required />

      <div class="error" ng-show="singnupForm.name.$dirty && singnupForm.name.$invalid">

          <small class="error" ng-show="singnupForm.name.$error.required">

              请录入用户名

          </small>

       <small class="error" ng-show="singnupForm.name.$error.minlength">

        最少2个字符

       </small>

       <small class="error" ng-show="singnupForm.name.$error.maxlength">

           最多20个字符

       </small>

       <small class="error" ng-show="singnupForm.name.$error.unique">

           用户名已经存在

       </small>

      </div>

  </div>

  </div>

  <div class="row">

      <div class="large-12 columns">

  <input type="password" placeholder="密码" name="pwd" ng-model="user.pwd" ng-minlength="5" required />

      <div class="error" ng-show="singnupForm.pwd.$dirty && singnupForm.pwd.$invalid">

      <small class="error" ng-show="singnupForm.pwd.$error.required">

              请录入密码

          </small>

       <small class="error" ng-show="singnupForm.pwd.$error.minlength">

        最少5个字符

       </small>

      </div>

      </div>

 </div>

<div class="row">

      <div class="large-12 columns">

      <input type="email" placeholder="邮件地址" name="email" ng-model="user.email" ng-minlength="5" ng-maxlength="20" required />

   <div class="error" ng-show="singnupForm.email.$dirty && singnupForm.email.$invalid">

      <small clss="error" ng-show="singnupForm.email.$error.required">

          请录入邮件地址

      </small>

      <small class="error" ng-show="singnupForm.email.$error.email">

          邮件地址不正确

      </small>

      <small class="error" ng-show="singnupForm.email.$error.minlength">

          最少3个字符

      </small>

      <small class="error" ng-show="singnupForm.email.$error.maxlength">

          最长20个字符

      </small>

  </div>

 </div>

 </div>

<div class="row">

      <div class="large-12 columns">

      <input type="number" placeholder="年龄" name="age" ng-model="user.age" ng-minlength="1" required />

   <div class="error" ng-show="singnupForm.age.$dirty && singnupForm.age.$invalid">

      <small clss="error" ng-show="singnupForm.age.$error.required">

          请录入年龄

      </small>

      <small class="error" ng-show="singnupForm.age.$error.number">

          年龄格式不正确

      </small>

  </div>

  <button type="submit" ng-disabled="singnupForm.$invalid" class="button radius">submit</button>

 </div>

 </div>

</fieldset>

</form>

<script src="angular.min.js"></script>

</body>

</html>

JS部分，加在Body前面

<script type="text/javascript">

    var myApp = angular.module('myApp',[]);

    myApp.directive('ensureUnique',function ($http) {

         return {

             require:'ngModel',

             link:function(scope,ele,attrs,c){

               scope.$watch(attrs.ngModel,function (n) {

                   if (!n)

                       return;

             $http.jsonp(

                'http://192.168.18.114:3301/LoginService.asmx/CheckUserNameExist?callback=JSON_CALLBACK',

                {

                    params  :{'username':scope.user.name}

                }

               ).success(function (data) {

               var isUnique = data && data.isUnique && data.isUnique.toLowerCase()=="true";

                   c.$setValidity('unique',isUnique);

               }).error(function  (data) {

                    c.$setValidity('unique',false);

               });

             });

          }

         };

    });

</script>

【AngularJS】通过jsonp与webmethod交互，实现ajax验证的更多相关文章

  1. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  2. 【AngularJs】---JSONP跨域访问数据传输（JSON_CALLBACK）

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  3. 一、Django前后端交互之Ajax和跨域问题

    一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...

  4. AngularJs与Java Web服务器交互

    AngularJs是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web ...

  5. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  6. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  7. 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  8. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  9. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

随机推荐

  1. 《SQL Server 2000设计与T-SQL编程》

    <SQL Server 2000设计与T-SQL编程> <SQL Server 2000设计与T-SQL编程>笔记1 http://dukedingding.blog.sohu ...

  2. 工作中php处理HTTP请求的缺陷总结

    之前遇到过php在处理一部分业务的时候总是感觉有短板,有些东西总是不能随人心意.比如执行时间问题,一个进程需要读取多条数据放入数组循环执行处理流程,就会很慢,容易超时,这个超时问题 可以用php设置s ...

  3. OSG简单测试框架

    #include <osgDB/ReadFile> #include <osgDB/FileUtils> #include <osg/ArgumentParser> ...

  4. 仿美团ViewPager+GridView

    在接下来我要实现一个仿美团的效果 1.首先写一个登录注册界面用到了,很简单... 这里要提醒各位在调用方法时有set...     也有add....  的方法,为了严谨可以做些正则判断手机号,用se ...

  5. json的循环

    通过for in: var json = {width: '200px', height: '200px', background: 'green'}; var i = ''; for(i in js ...

  6. 【BZOJ4254】Aerial Tramway 树形DP

    [BZOJ4254]Aerial Tramway 题意:给你一座山上n点的坐标,让你在山里建m条缆车,要求缆车两端的高度必须相等,且中间经过的点的高度都小于缆车的高度.并且不能存在一个点位于至少k条缆 ...

  7. 【BZOJ1050】[HAOI2006]旅行comf 并查集

    [BZOJ1050][HAOI2006]旅行comf Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<300 ...

  8. android-修改TextView中部分文字的颜色

    :

  9. java利用反射机制获取list中的某个字段并以list形式返回

    public static<T> List<Object> listToList(Collection<T> list,String fieldName) thro ...

  10. Date 日期格式化

    <span id="time"></span> <script> //名称:日期加法函数 //参数:part(year.month.day.ho ...