服务端配置

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. Objective-C Runtime初探：self super

    题目 上题目,已知A是爷爷,B是爸爸,C是孙子. @interface A : NSObject - (void)f; @end @interface B : A - (void)f; - (void ...

  2. React + Redux 入门（一）：抛开 React 学 Redux

    http://www.hacke2.cn/think-in-react-redux-1/

  3. laravel 调试模式及日志配置

    1)调试模式和日志的配置都在 config/app.php 配置文件中 2)打开调试模式 'debug' => env('APP_DEBUG', true) 3)laravel的日志默认已经打开 ...

  4. JB开发之问题汇总 [jailbreak，越狱技术]

    1.升级到Mac 10.9.1,Xcode 升级到5出现的问题: 1)升级前要做的事情: ①升级/重新安装iOSOpenDev,在终端输入 xcode-select --switch (xcode_d ...

  5. JVM内存简析

    1.程序计数器: 这是一块较小的内存空间,它的作用可以看作是当前线程所执行的字节码的行号指示器,线程私有. 2.Java虚拟机栈: 它是Java方法执行的内存模型,每一个方法被调用到执行完成的过程,就 ...

  6. 通过python3学习编码

    简介 今天在写python程序的时候,遇到了编码问题,今天,我准备好好了解一下编码问题 ASCII编码 计算机是美国人发明的,最初只有不超过256字符需要编码,1字节能编码2**8个,所以ASCII编 ...

  7. Browser Cookie Limits

    w https://cait.calarts.edu/hc/en-us/articles/217055138-Error-Maximum-Number-of-Cookie-Values-Reached ...

  8. User Login Client Identification

    w用HTTP认证首部注册用户名. HTTP The Definitive Guide Rather than passively trying to guess the identity of a u ...

  9. wf-删除所选

    w框架-结合用户的不同点击路径,提交正确的id集合. <table class="table"> <tr> <td></td> &l ...

  10. Python 线程(threading)

    Python 的thread模块是比较底层的模块,Python的threading模块是对thread做了一些包装,可以更加方便的 被使用; 1. 使用threading 模块 # 示例一: 单线程执 ...