大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、jQuery中的Ajax

前面我们写了这么多 Ajax 的代码，其实都是基于 js 的原生代码，在 jQuery 的内部，对 Ajax 已经进行了封装，它提供了很多方法可以供开发者进行调用。不过这些封装都是基于一个方法的基础上进行的修改，这个方法就是$.ajax() 。

我们主要学习3个方法：

  • $.ajax();
  • $.get();
  • $.post();

1、$.ajax()

$.ajax() 和 自己的 myAjax2() 使用起来非常的相似，基本上原理一致。同样是传入一个对象，有些参数不传递的话也有默认值。

// 其他代码省略

userObj.blur(function () {

  $.ajax({

    url: "./server/checkUsername.php",

    type: "get",

    data: {uname: this.value},

    success: function (result) {

      if(result == "ok") {

        userSpanObj.text("用户名可用");

      } else if(result == "error") {

        userSpanObj.text("用户名不可用");

      }

    }

  });

});

2、$.get() 和 $.post

只需要传两个参数，第一个参数是url（带param的，里面有参数和值），第二个参数是回调函数。

// $.get()

$.get(url + "?" + params, function (result) {});

// $.post()

$.post(url, {参数: 值}, function(result) {});

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<div id="dv">

    <h1>用户注册</h1>

    用户名：<input type="text" name="username"><span id="user-span"></span><br>

    邮箱：<input type="text" name="email"><span id="email-span"></span><br>

    手机：<input type="text" name="phone"><span id="phone-span"></span><br>

</div>

<script src="jquery-1.12.4.min.js"></script>

<script>

    // 获取所有元素

    var userObj = $("input[name='username']");

    var emailObj = $("input[name='email']");

    var phoneObj = $("input[name='phone']");

    var userSpanObj = $("#user-span");

    var emailSpanObj = $("#email-span");

    var phoneSpanObj = $("#phone-span");

    //用户名文本框失去焦点事件

    userObj.blur(function () {

        $.get("./server/checkUsername.php?uname=" + $(this).val(), function (result) {

            if (result == "ok") {

                userSpanObj.text("用户名可用");

            } else if (result == "error") {

                userSpanObj.text("用户名不可用");

            }

        });

    });

    //邮箱文本框失去焦点事件

    emailObj.blur(function () {

        $.post("./server/checkEmail.php", {e: $(this).val()}, function (result) {

            if (result == 0) {

                emailSpanObj.text("邮箱可用");

            } else if (result == 1) {

                emailSpanObj.text("邮箱不可用");

            }

        });

    });

    //手机号文本框失去焦点事件

    phoneObj.blur(function () {

        $.post("./server/checkPhone.php", {phonenumber: $(this).val()}, function (result) {

            result = JSON.parse(result);

            if (result.status == 0) {

                phoneSpanObj.text(result.message.tips + " " + result.message.phonefrom);

            } else if (result.status == 1) {

                phoneSpanObj.text(result.message);

            }

        });

    });

</script>

</body>

</html>

从零开始学 Web 之 Ajax（六）jQuery中的Ajax的更多相关文章

  1. 从零开始学习jQuery (六) jquery中的AJAX使用

    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即 ...

  2. js中的原生Ajax和JQuery中的Ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...

  3. 试试自行封装AJAX和jQuery中的ajax封装的基本使用

    封装的套路: 1.写一个相对比较完善的用例2.写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体3.根据使用过程中的需求抽象函数 代码记录如下: <script> function ...

  4. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  7. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 Ajax（七）跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. leveldb 学习记录(四) skiplist补与变长数字

    在leveldb 学习记录(一) skiplist 已经将skiplist的插入 查找等操作流程用图示说明 这里在介绍 下skiplist的代码 里面有几个模块 template<typenam ...

  2. Linux学习---条件预处理的应用

    预处理的使用: ⑴包含头文件 #include ⑵宏定义 #define    替换,不进行语法检查 ①常量宏定义:#define 宏名 (宏体) (加括号为防止不进行语法检查而出现的错误) eg:# ...

  3. python repr()和str()

    两者功能差不多,都是把对象转为字符串表示形式,但是也有区别,repr()之后再eval()可以转为原型,但str()只能保证大多数,不能100% 其中主要的 差别在与 字符串对象本身,比如 a = ' ...

  4. JAVA 8 主要新特性 ----------------(二)JDK1.8优点概括

    一.JDK1.8优点概括 1.速度更快 由于底层结构和JVM的改变,使得JDK1.8的速度提高. 2.代码更少(增加了新的语法 Lambda 表达式)          增加新特性Lambda表达式的 ...

  5. UVaLive 5760 Alice and Bob (博弈 + 记忆化搜索)

    题意:有 n 堆石子,有两种操作,一种是从一堆中拿走一个,另一种是把两堆合并起来,Alice 先拿,谁不能拿了谁输,问谁胜. 析:某些堆石子数量为 1 是特殊,石子数量大于 1 个的都合并起来,再拿, ...

  6. 可遇不可求的Question之MySQL系统变量interactive_timeout 与 wait_timeout 篇

    mysql>show variables like '%timeout'; 打印结果如下: +----------------------------+-------+ | Variable_n ...

  7. Android-Java-静态变量与静态方法内存图

    描述Dog对象: package android.java.oop10; public class Dog { public static String name; public static int ...

  8. Xcode8.0 / OS X EI Capitan 10.11.6 提交报错90111

    改用新系统和新版xcode(都是正式版)后,提交App Store审核时报错: INFO ITMS-90111: "Beta Toolchain. 构建新的 App 和App 更新时,必须使 ...

  9. iOS逆向工程之Cycript

    1.连接设备 打开一个终端,输入指令: iproxy 重新打开一个新的终端,输入指令: ssh -p root@127.0.0.1 这时候会提示输入密码:默认密码为“alpine”.这样就可以连接到设 ...

  10. CS231中的python + numpy课程

    本课程中所有作业将使用Python来完成.Python本身就是一种很棒的通用编程语言,现在在一些流行的库(numpy,scipy,matplotlib)的帮助下,它为科学计算提供强大的环境. 我们希望 ...