大家好，这里是「 从零开始学 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. node.js中stream流中可读流和可写流的使用

    node.js中的流 stream 是处理流式数据的抽象接口.node.js 提供了很多流对象,像http中的request和response,和 process.stdout 都是流的实例. 流可以 ...

  2. stark组件开发之添加功能实现

    添加功能,还是使用, form 组件来完成!  并且 完成添加之后,需要保留原搜索条件. def memory_url(self): '''用于反向生成url, 并且携带,get请求的参数,跳转到下一 ...

  3. centos7 smplayer 安装 安装视频播放器

    # yum -y install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noar ...

  4. ES之五：ElasticSearch聚合

    前言 说完了ES的索引与检索,接着再介绍一个ES高级功能API – 聚合(Aggregations),聚合功能为ES注入了统计分析的血统,使用户在面对大数据提取统计指标时变得游刃有余.同样的工作,你在 ...

  5. C语言输出格雷码

    格雷码是以n位的二进制来表示数. 与普通的二进制表示不同的是,它要求相邻两个数字只能有1个数位不同. 首尾两个数字也要求只有1位之差. 有很多算法来生成格雷码.以下是较常见的一种: 从编码全0开始生成 ...

  6. 简易数据库实现 UNIX环境高级编程(APUE)第二十章 A Database Library

    将课程的源代码 使用C++写了一部分 LINUX WINDOW均可运行 #ifndef MYDB_H #define MYDB_H #include <iostream> #include ...

  7. 学习:java集合

    java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaEE, JavaME, Jav ...

  8. ABP框架系列之十八：(Data-Transfer-Objects-数据转换对象)

    Data Transfer Objects are used to transfer data between Application Layer and Presentation Layer. 数据 ...

  9. Java面试题5

    4.&和&&的区别 答: &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 5.Collection 和 Collections的区 ...

  10. Linux下设置快捷键

    以设置终端为例,进入Settings>>Keyboard>>Custom Shortcuts,点左下脚的+号,Name栏填入Treminal,command栏填入gnome-t ...