从零开始学 Web 之 Ajax（六）jQuery中的Ajax

lvonve 2018-07-20 原文

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

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 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>