大家好，这里是「 从零开始学 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. Error running Tomcat8: Address localhost:xxxx is already in use

    参考自: https://blog.csdn.net/huazhongkejidaxuezpp/article/details/41813683 第一步,命令提示符号,执行命令:netstat -an ...

  2. 每月最后一周的周六晚上21:00执行任务-crontab

    0 21 * * 6 /bin/sh /root/time.sh #“6”代表周六 时间判断脚本如下: #!/bin/bash if [ "$(date -d "+7 days&q ...

  3. CITROEN C8 BSI HC12 Mileage Correction with Digiprog3

    CITROEN C8 BSI HC12 odometer correction pinout to Digiprog III Digiprog 3 mileage programmer. The BS ...

  4. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验一 Java开发环境的熟悉 实验报告

    20175316 盛茂淞 2018-2019-2 <Java程序设计>实验一 Java开发环境的熟悉 实验报告 一.实验要求 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA ...

  5. Photoshop制作仿等高线着色图

    起因是最近玩游戏The Long Dark,看到贴吧还是Steam上有人放了等高线图,看起来非常炫酷,于是想自己折腾下. 解包了游戏高度图 Matlab绘制如下 自己瞎写的量化+颜色映射如下,Shad ...

  6. SGU 176 Flow construction (有源有汇有上下界最小流)

    题意:给定 n 个点,m 条有向边,如果有向边的标号是1的话,就表示该边的上界下界都为容量 ,如果有向边的标号为0的哈,表示该边的下界为0,上界为容量 ,现在问,从 1 到 n 的最小流是多少,并输出 ...

  7. C++中的return和exit区别

    在main函数中,return和exit经常混用,两者的一个区别:return会执行statck unwinding,而exit不会.如果触发了信号,exit也同样不会做stack unwinding ...

  8. org.apache.subversion.javahl.ClientException: Previous operation has not finished

    1.问题 eclipse使用SVN出现异常: org.apache.subversion.javahl.ClientException: Previous operation has not fini ...

  9. hadoop2.4.0伪分布式搭建以及分布式关机重启后datanode没起来的解决办法

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  10. Js之设置日期时间 判断日期是否在范围内

    var now = new Date(); var startDate = new Date(); startDate.setFullYear(2018, 08, 07); startDate.set ...