前端 数据提交方法

一、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 : "/index/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>