首页 > 代码库 > 【AngularJS】通过jsonp与webmethod交互，实现ajax验证
【AngularJS】通过jsonp与webmethod交互，实现ajax验证
服务端配置
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验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。