大家好，这里是「 从零开始学 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. pythone函数基础（10）MD5加密

    导入hashlib模块import hashlibs='yulin123456's.encode()#把数字转换成bytes类型m=hashlib.md5(s.encode())print(m.hex ...

  2. Iris数据集实战

    本次主要围绕Iris数据集进行一个简单的数据分析, 另外在数据的可视化部分进行了重点介绍. 环境 win8, python3.7, jupyter notebook 目录 1. 项目背景 2. 数据概 ...

  3. Ubuntu部署可视化爬虫Portia2.0环境以及入门

    http://www.cnblogs.com/kfpa/p/Portia.html http://brucedone.com/archives/986

  4. 三 分析easyswoole源码（启动服务&TableManager，略提及Cache工具的原理）

    前文连接,讲了es是如何启动swoole服务的. 里面有一个工具类TableManager.这个类为了处理进程间数据共享.是对swoole_table的一层封装swoole_table一个基于共享内存 ...

  5. Android手机上浏览器不支持带端口号wss解决方案

    首先抄个示例过来,命名为wss-test.html,然后传到服务器: <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  6. android studio 将自己的项目生成jar包

    很多情况下我们开发的项目不是一个完整的app,而是完成一部分功能,供别人的app使用的情况.这时就需要将我们的项目打包生成jar或者arr库文件,让别人的app导入我们的jar包,就能直接使用我们项目 ...

  7. Eclipse中代码自动提示功能设置

    Eclipse中代码自动提示功能设置 1 打开eclipse→Windows→Preferences→Java→Editor→Content Assist: 修改Auto Activation tri ...

  8. 网页打印样式CSS

    相信大多数的前端工程师都是处理显示屏上面的设计,用到最多的计量单位就是px,但是有些时候,我们难免也会有打印的需求,比如一个电商平台的“物流配送打印单”,“打印订单”等等可能都是需要从网友上打印出来的 ...

  9. centos7安装keepalived问题

    ● keepalived.service - LVS and VRRP High Availability Monitor Loaded: loaded (/usr/lib/systemd/syste ...

  10. UVaLive 4064 Magnetic Train Tracks (极角排序)

    题意:给定 n 个不三点共线的点,然后问你能组成多少锐角或者直角三角形. 析:可以反过来求,求有多少个钝角三角形,然后再用总的减去,直接求肯定会超时,但是可以枚举每个点,以该点为钝角的那个顶点,然后再 ...