大家好，这里是「 从零开始学 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. 用php获取js变量的值

    <script type="text/javascript"> var t1 = "fff"; var t2 = "<?php ec ...

  2. css3回顾 checkbox

    <div class="checkBox"> <input type="checkbox" id="check1"> ...

  3. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  4. RFC

    一.简介   二.常用 1)TLSv1.2 Protocol https://tools.ietf.org/html/rfc5246

  5. spring入门——applicationContext与BeanFactory的区别

    我们知道从applicationContext容器对象中如何获取Bean了,其实spring框架还有另外一种获取bean的方法:BeanFactory代码如下: BeanFactory factory ...

  6. hbase-基础架构

    介绍 hbase架构主要由hmaster,zookeeper和regionserver三部分构成,底层数据存储在hdfs中 hmaster 允许有多个master节点,使用zookeeper控制,保证 ...

  7. 我的java学习之旅--一些基础

    (因为我粗略学过C,C++,Python,了解过他们的一些语法,所以为了使得java的入门更为顺畅,便会忽略一些和C语法相类似的地方,着重点明一些java自己的特色之处.也减轻一下自己写文字的负担.) ...

  8. windows 性能监视器

    转载地址:https://www.cnblogs.com/luo-mao/p/5872374.html

  9. Win7 64位使用IDA Pro 6.8调试64位exe程序

    有点小坑,记录备忘. 首先搞个IDA Pro6.8,写本文时能找到的最高版本,试了下果然比6.6强大许多,其实6.6也没怎么用过...... 32位版本有个Local Win32 debugger,但 ...

  10. MySQL之二 yum安装及初识

      安装   yum install mysql-server chkconfig -list mysqld 查看mysqld服务是否为开机启动 chkconfig mysqld on 设为开机启动 ...