服务端配置

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. 如何用ChemDraw中的ChemFinder查询反应过程

    ChemFinder是ChemDraw化学绘图软件的重要插件之一,ChemFinder是一个贮存众多化学信息的数据库管理系统,不仅可以用于查询基本化学结构,用户还可以用ChemFinder查询需要的反 ...

  2. hdu 2437(dfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2437 思路:只需用一个二维数组记录到达某点时路径长度mod k的最短路径长度,如果余数相同,就更新最小 ...

  3. HDU2586.How far away ？——近期公共祖先（离线Tarjan）

    http://acm.hdu.edu.cn/showproblem.php?pid=2586 给定一棵带权有根树,对于m个查询(u,v),求得u到v之间的最短距离 那么仅仅要求得LCA(u,v),di ...

  4. m2014_c->c语言容器类工具列

    转自:http://www.cnblogs.com/sniperHW/category/374086.html cocos2dx内存管理 摘要: cocos2dx基于引用计数管理内存,所有继承自CCO ...

  5. Ubuntu16.04最快捷搭建小型局域网Git服务器

    导读 使用linux操作系统,不得不提Git版本管理器,这个Linus花了两周时间开发的分布式版本管理器(这就是大神,先膜了个拜...),毫无疑问,Git版本管理器与linux系统有着与生俱来的同一血 ...

  6. redhad linux 7 安装ftp服务

    1. 查看有没有安装 rpm -qa|grep vsftpd 2.安装vsftp yum install vsftpd -y 3. 启动vsftp /sbin/service vsftpd start ...

  7. Zabbix高可用

    上一篇:Zabbix数据库表结构 安装两台Zabbix-server 两台均安装MySQL数据库 数据库做双主互相同步 keepalive做vip偏移 to_master.sh脚本 两边都要安装ssh ...

  8. Servlet------>jsp自定义标签3（不显示余下jsp内容）

    2.自定义标签控制,jsp页面余下标签是否继续执行 EndTag.java package tag; import javax.servlet.jsp.JspException; import jav ...

  9. setMasksToBounds

    setMasksToBounds 在IB中,当你使用Custom类型的Button时,你可以指定按钮的背景色.但当你运行时按钮就失去了圆角特性,你看到的仅仅是一个方块.因为custombutton没有 ...

  10. odex反编译dex异常 Cannot locate boot class path file /system/framework/core.odex

      为了将ROM中system/app下的CertInstaller.odex反编译为CertInstaller.dex,输入命令: "java -jar baksmali.jar -x C ...