服务端配置

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. 在PHP项目中，每个类都要有对应的命名空间，为什么？

    语法: namespace  Admin\Controller; 功能: 命名空间主要用来区分控制器属于哪个模块下,好区分,更有利于项目的维护:

  2. ios 开发之 -- UILabel的text竖行显示

    让UILabel的内容竖行显示,我经常用一下两种方式: 第一种:使用换行符 \n label.text = @"请\n竖\n直\n方\n向\n排\n列"; label.number ...

  3. iOS开发之-- 从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题

    在修改项目代码的过程中,遇到一个问题,就是比如主页面的导航栏是隐藏的,但是需要push到别的页面,这个时候,会出现导航栏闪一下的情况, 下面是我写的一种方案,也就是在loadView这个生命周期函数中 ...

  4. 递归删除资源树 Ztree

    前言 最近项目里有这么一个需求:现在有一个用Ztree编写的资源树,当删除资源树的某个节点时,则将此节点下面的所有节点全部删除,这里显然就用到了递归:若此节点被删除后无其它的兄弟节点了,我们还需要将其 ...

  5. centos7 docker install

    env: os :centos 7 vmware steps: 1.yum  -y install docker after installed ,using   docker version cmd ...

  6. 【黑金原创教程】【TimeQuest】【第一章】TimeQuest 静态时序分析模型的概念

      声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/ ...

  7. 【BZOJ1857】[Scoi2010]传送带 三分套三分

    [BZOJ1857][Scoi2010]传送带 Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度 ...

  8. 通过pymysql程序debug学习数据库事务、隔离级别

    问题 今天在使用pymysql连数据库的时候,出现了一个bug,查询数据库某个数据,但是在我在数据库中执行sql语句改变数据后,pymsql的查询依然没有发生改变. 代码如下: # 5.6.10 co ...

  9. MSSQL移除字符串两边的指定字符

    移除字符串左边的字符: CREATE FUNCTION [dbo].[RemoveLeftChar] ( @Expression varchar(max), @char varchar(4))RETU ...

  10. UEFI,BIOS,MBR,

    UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提高开机后操作系统的启动速度.由于开机过程中UEFI的介入 第一:安全性更强 UEFI启动需要 ...