從零開始學 Web 之 Ajax（六）jQuery中的Ajax

時間 2019-11-17

標籤開始 web ajax jquery 欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......php

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

微信公衆號：Web前端之巔

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

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

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、jQuery中的Ajax

前面咱們寫了這麼多 Ajax 的代碼，其實都是基於 js 的原生代碼，在 jQuery 的內部，對 Ajax 已經進行了封裝，它提供了不少方法能夠供開發者進行調用。不過這些封裝都是基於一個方法的基礎上進行的修改，這個方法就是$.ajax() 。前端

咱們主要學習3個方法：jquery

$.ajax();
$.get();
$.post();

一、$.ajax()

$.ajax() 和本身的 myAjax2() 使用起來很是的類似，基本上原理一致。一樣是傳入一個對象，有些參數不傳遞的話也有默認值。git

// 其餘代碼省略
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("用戶名不可用");
      }
    }
  });
});

二、$.get() 和 $.post

只須要傳兩個參數，第一個參數是url（帶param的，裏面有參數和值），第二個參數是回調函數。github

// $.get()
$.get(url + "?" + params, function (result) {});
// $.post()
$.post(url, {參數: 值}, function(result) {});

示例：ajax

<!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>