前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据
一、JQuery 简介
jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
二、Ajax 简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
三、传统Web应用开发模式与 Ajax 开发模式对比
此部分参考:http://www.cnblogs.com/woniu123/p/5911284.html
1、传统Web应用开发模式
在Web的传统开发模式中,页面中用户的每一次操作都会触发一次Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面给客户端。(即每次都要刷新页面)
2、Ajax 开发模式
在Ajax应用中,页面中用户的操作会通过Ajax引擎与服务器进行通信,然后将返回的结果提交给客户端的Ajax引擎,再由Ajax引擎来决定将返回的数据插入到页面指定的位置。
3、对比总结
Web的传统开发模式:对于每个用户行为,生成一次HTTP请求。
Web的Ajax开发模式:变成对Ajax引擎的一次JavaScript调用。
四、开发实例
1、HTML 代码 register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example Register page header
<small>Register Form</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="username">Name</label>
<input type="text" class="form-control" id="username" placeholder="Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<p>
<button type="button" class="btn btn-primary" id="signUp">Sign up</button>
<button type="button" class="btn btn-default">Sign in</button>
</p>
</form>
</div>
</div>
</div>
<!--弹出框-->
<div class="modal fade" id="msgModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Message</h4>
</div>
<div class="modal-body">
<p id="msg"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="register.js"></script>
</body>
</html>
2、JS代码 register.js
$(function () {
// 按钮单击时执行
$("#signUp").click(function () {
var username = $('#username').val();
var password = $('#password').val();
if (!checkParams({
username: username,
password: password
})) {
return false;
}
$.post("http://url/register",
{
username: username,
password: password
}, function (data) {
if (data.errorCode === 0) {
msg('注册成功~');
} else {
msg('注册失败:' + data.msg);
}
});
});
// 校验提交数据
function checkParams(params) {
if (!params.username) {
msg('用户名不能为空~');
return false;
}
if (!params.password) {
msg('密码不能为空~');
return false;
}
return true;
}
// 弹出框方法
function msg(msg) {
$('#msg').html(msg);
$('#msgModal').modal({
keyboard: false
});
}
});
3、页面效果
五、代码重点解析
1、JQuery获取 Input 输入值
HTML 关键代码
<input type="text" class="form-control" id="username" placeholder="Name">
<input type="password" class="form-control" id="password" placeholder="Password">
JS 关键代码
var username = $('#username').val();
var password = $('#password').val();
原理:使用 JQuery 的 Id 选择器
username的 input 输入框的 id=“username” ,利用 JQuery 的 $(’#username’).val() 来获取其值;
password的 input 输入框的 id=“password” ,利用 JQuery 的 $(’#password’).val() 来获取其值;
其中 :# 代表使用 Id 选择器 ,# 后面的 username 对应 HTML 元素的 id 值
2、Ajax请求服务器
JS 关键代码
$.post("http://url/register",{
username: username,
password: password
},function(data){
});
$.post的格式如下:
$.post(请求地址,请求参数,接口返回数据)