mirror of
https://github.com/Daotin/Web.git
synced 2024-11-01 13:34:47 +08:00
119 lines
3.3 KiB
Markdown
119 lines
3.3 KiB
Markdown
前面我们写了这么多 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>
|
||
```
|
||
|