從零開始學 Web 之 Ajax(六)jQuery中的Ajax

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

在這裏我會從 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>

相關文章
相關標籤/搜索