一、Form表单形式
标签：form（声明调用的方法action和请求方式method）
标签：input（字段name；值value）
1.字段分开方式
.html文件提交数据
<form action="loginAction" method="post">
<input type="text" placeholder="用户名" name="username">
<input type="password" placeholder="密码" name="password">
<button type="submit">登 录</button>
</form>
.php文件获取数据
$username = I('username');
$password = I('password');
2.字段集合方式
.html文件提交数据
<form action="loginAction" method="post">
<input type="text" placeholder="用户名" name="User['username']">
<input type="password" placeholder="密码" name="User['password']">
<button type="submit">登 录</button>
</form>
.php文件获取数据
$user = I('User');
$username = user['username'];
$password = user['password'];
二、AJAX方式
标签：input（唯一标识id；值value）
标签：script（声明方法function）
jQuery：$("#id").val()（获取id的值）
jQuery：$.ajax（ajax请求方式写法）
html样式数据body
<input id="username" type="text" placeholder="用户名">
<input id="password" type="password" placeholder="密码">
<span id="submit" onclick="loginAction()" >登 录</span>
script请求数据head
<script type="text/javascript">
function loginAction() {
/*修改标签的元素内容*/
document.getElementById("submit").innerHTML="登录中";
/*获取标签的值*/
var account = $("#username").val(), password = $("#password").val();
var data = {
'username' : account,
'password' : password
};
/* ajax请求*/
$.ajax({
type : "POST", // 请求方式
url : "__URL__/do_login", // 发送请求的地址
data : data, // 请求参数
async : true, // 异步请求
cache : false, // 缓存
dataType : "json", // 返回的数据类型
/*请求完成的回调函数（请求成功或失败时均调用*/
complete : function(XMLHttpRequest, textStatus){
document.getElementById("submit").innerHTML="登 录";
},
/*请求成功的回调函数*/
success : function(data, textStatus) {
if (data.code == 0) {
window.location.href = "{:U('Index/index')}";
}else{
console.log(data.message);
}
},
/*请求失败的回调函数*/
error : function(XMLHttpRequest, textStatus, errorThrown){
},
});
}
</script>
