jquery 中ajax执行的优先级

2024-10-20 16:25:13

今天在做用户注册时：发现了一个奇怪的问题，请看代码：

$('input[name="username"]').blur(function(){
    //验证格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
      return false;
    }
    //验证用户名是否被注册
    $.post('register.php?act=checkUser',{username:$(this).val()},function(data){
      if(data.status == 'error') {
        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
        return false;
      }
    },'json');

    //成功
 alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  });

按道理说，上面的格式是

1、验证用户名是否符合格式
2、格式正确再AJAX判断用户名是否被占用，
3、都成功则显示正确的图标，

但是问题是当我验证用户格式成功了之后，它就直接执行了，alert('成功')，然后再执行ajax，这是为什么呢？是ajax执行的时间问题吗？还是别的？？？

这是PHP代码：

if($_GET['act'] == 'checkUser') {
  if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作！！！');

  $sql = "SELECT id FROM {$sys_vars['db_pre']}user WHERE username='{$_POST['username']}'";

  $result = mysql_query($sql);
  $data = mysql_fetch_assoc($result);
  if ($data) {
    exit(json_encode(array('status'=>'error','info'=>'该用户名已被注册！！！')));
  }else{
    exit(json_encode(array('status'=>'success')));
  }
}

分析如下

ajax是异步操作，当执行ajax相关功能函数时，系统先返回函数，再进行请求，当收到请求结果，会通过调用回调函数的方式返回给用户。

$('input[name="username"]').blur(function(){
    //验证格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
      return false;
    }
    //验证用户名是否被注册
    $.post('register.php?act=checkUser',{username:$(this).val()},function(data){
      if(data.status == 'error') {
        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
        return false;
      }
    },
    function(data){  //对于post函数，第三个参数为回调函数
      alert('成功');
    }
    ,'json');

    //成功
 //alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  });

照这样修改一下，试试，体会一下不同之处。
不同的ajax函数其回调函数的使用方法略有不同，可参考w3school的教程或jQuery官网。

这个其实是js的同步和异步的问题，异步的话你可以想象一下两条线路

代码如下:

--执行函数调用--正则验证--发起ajax--函数返回         ajax回调
                            |                        |
                            |                        |
                           浏览器请求--php处理--浏览器接到结果

如果想让函数返回在ajax回调之后，可以改变上边的模型，例如：

代码如下:

--执行函数调用--正则验证--发起ajax                  ajax回调--函数返回
                            |                        |
                            |                        |
                           浏览器请求--php处理--浏览器接到结果

这个可以通过修改jquery的发起ajax是异步还是同步方式来实现！

$('input[name="username"]').blur(function(){
  //验证格式
  var pattern = /^[a-z][\w]{4,11}$/i;
  if(!pattern.test($(this).val())) {
    $(this).siblings('.desc').html('<font style="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
    return false;
  }
  //验证用户名是否被注册
  var ajaxCheckUser = false;
  $.ajax({
    type: "POST",
    url: "register.php?act=checkUser",
    data: {username:$(this).val()},
    // 注意这里
    async:false
    success: function(data){
    if(data.status == 'error') {
      $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
      //return false;
    } else {
      ajaxCheckUser = true;
    }
  },'json');

  if(ajaxCheckUser) {
    //成功
    alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  }

});

以上所述就是本文的全部内容了，希望大家能够喜欢。

JQuery中ajax方法访问web服务实例

本文实例讲述了JQuery中ajax方法访问web服务.分享给大家供大家参考.具体分析如下: 说明: ArrayList 中存为对象CollegeDepartInfo 其属性为:stirng CollegeDepartTitle 和 int CollegeDepartId 在javascript中 ddlDepart.options[ddlDepart.length]=new Option(n.CollegeDepartTitle,n.CollegeDepartId); Option的参数就是
jQuery结合ajax实现动态加载文本内容

ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01&q
jQuery取消ajax请求的方法

本文实例讲述了jQuery取消ajax请求的方法.分享给大家供大家参考.具体分析如下: 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做的结果仅仅是让浏览器不再监听这个请求的响应,但服务器端仍然会进行处理 var xhr = $.ajax({ type: "POST", url: "test.php", data: "name=test", success: function(msg
jQuery通过Ajax返回JSON数据

服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. <ul id="userlist"> <li><a hre
jQuery结合AJAX之在页面滚动时从服务器加载数据

简介文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中.然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现
php+ajax+jquery实现点击加载更多内容

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录
PHP+jQuery+Ajax实现用户登录与退出

用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v
jQuery+AJAX实现无刷新下拉加载更多

随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互. js code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t
jQuery+ajax实现无刷新级联菜单示例

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC &quo
jquery 中ajax执行的优先级

今天在做用户注册时:发现了一个奇怪的问题,请看代码: $('input[name="username"]').blur(function(){ //验证格式 var pattern = /^[a-z][\w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12个字符,必须以字母开头,只能输入数字
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec
jQuery中ajax的get()方法用法实例

本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri
jQuery中ajax的load()方法用法实例

本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.
jQuery中ajax的post()方法用法实例

本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码代码如下: <!DOCTYPE html> <html&g
jQuery中ajax的load()与post()方法实例详解

本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定
jquery中ajax使用error调试错误的方法

本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a
Jquery中$.ajax()方法参数详解

俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:
Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息格式 $(selector).get(url,data,success(response,status,xhr),dataType

jquery 中ajax执行的优先级

相关推荐

随机推荐