1
0
mirror of https://github.com/Daotin/Web.git synced 2024-11-01 05:24:46 +08:00
Web-main/06-Ajax/09-jQuery中的Ajax.md
2020-12-30 11:39:04 +08:00

119 lines
3.3 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

前面我们写了这么多 Ajax 的代码,其实都是基于 js 的原生代码,在 jQuery 的内部,对 Ajax 已经进行了封装,它提供了很多方法可以供开发者进行调用。不过这些封装都是基于一个方法的基础上进行的修改,这个方法就是`$.ajax()` 。
我们主要学习3个方法
- $.ajax();
- $.get();
- $.post();
### 1、$.ajax()
$.ajax() 和 自己的 myAjax2() 使用起来非常的相似,基本上原理一致。同样是传入一个对象,有些参数不传递的话也有默认值。
```js
// 其他代码省略
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的里面有参数和值第二个参数是回调函数。
```js
// $.get()
$.get(url + "?" + params, function (result) {});
// $.post()
$.post(url, {参数: }, function(result) {});
```
示例:
```html
<!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>
```