服务端配置

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验证的更多相关文章

【AngularJs】---JSONP跨域访问数据传输
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
【AngularJs】---JSONP跨域访问数据传输（JSON_CALLBACK）
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
AngularJs与Java Web服务器交互
AngularJs是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web ...
无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
利用jQuery实现的Ajax 验证用户名是否存在
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

随机推荐

SharedPreferences小技巧
相信Android的这个最简单的存储方式大家都很熟悉了,但是有一个小小技巧,也许你没有用过,今天就跟大家分享一下,我们可以把SharedPreferences封装在一个工具类中,当我们需要写数据和读数 ...
zoj3686(线段树的区间更新)
对线段树的区间更新有了初步的了解... A Simple Tree Problem Time Limit: 3 Seconds Memory Limit: 65536 KB Given a ...
python裁剪base64编码的图片
简介今天遇到需要裁剪base64字符串的PNG图片,并返回base64格式字符串的任务,捣鼓半天. 裁剪代码如下: def deal_inspect_img(base64_str): "& ...
spring的@Transactional注解详细用法（转载）
概述事务管理对于企业应用来说是至关重要的,即使出现异常情况,它也可以保证数据的一致性.Spring Framework对事务管理提供了一致的抽象,其特点如下: 为不同的事务API提供一致的编程模型, ...
后端程序员如何玩转AJAX
1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式) 创建一个核心对象 XMLHttpRequest var xmlhttp; if (window.XMLHttpRequest) ...
nexus配置第三方库文件
进入nexus管理界面默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...
Java--运算符的优先级表
Java运算符的优先级表:
解决;R语言使用sqldf库是报错"Failed to connect to database: Error: Access denied for user '..'@'localhost' (using password: NO) Error in !dbPreExists : invalid argument type"
原因:在使用sqldf时,不需要加载RMySQL库解决方案:在控制台执行释放RMySQL库加载 detach("package:RMySQL", unload=T);
PHP使用 DOMDocument创建和解析xml文件
<?php//声明一个DOMDocument对象$_doc=new DOMDocument('1.0', 'utf-8'); / ...
HDU_5533_Dancing Stars on Me
Dancing Stars on Me Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Ot ...

【AngularJS】通过jsonp与webmethod交互，实现ajax验证

服务端配置

网页配置

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

随机推荐

热门专题