从零开始学 Web 之 AjaxjQuery中的Ajax

Posted 道廷の博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始学 Web 之 AjaxjQuery中的Ajax相关的知识,希望对你有一定的参考价值。

大家好,这里是「 从零开始学 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 之 AjaxjQuery中的Ajax的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学 Web 之 DOM事件冒泡

从零开始学 Web 之 移动WebLess

从零开始学 Web 之 AjaxAjax 概述,快速上手

从零开始学 Web 之 移动Web微金所案例

从零开始学 Web 之 BOMBOM的概念,一些BOM对象

从零开始学 Web 之 Ajax同步异步请求,数据格式