Ajax提交表单数据

ajax的基本语法

$.ajax({
    type: "post",  //数据提交方式（post/get）
    url: "demo.php",  //提交到的url
    data: {"key1":"value1","key2":"value2"},//提交的数据
    dataType: "json",//返回的数据类型格式
    success: function(msg){
      //code...返回成功的回调函数
    },
    error:function(msg){
      //code...返回失败的回调函数
    }
});

html端：

<!--要提交的表单-->
<form method="post" action="demo.php" id="formid" >
    <input type="text" name="username" id="username"/>
    <button id="submit" type="submit">submit</button>
</form>
<!--局部更新的区域-->
<div id="display"></div>

php服务端代码demo.php：

<?php
$username = $_POST['username'];
$data = "{username:'$username'}";//组合成json格式数据
echo json_encode($data);//返回json格式数据
?>

html端的script代码：

<script>
    $(document).ready(function(){
        $("#submit").click(function(e){
            e.preventDefault();//阻止默认的表单提交
            username = $("#username").val();//获取表单的输入值
            $.ajax({
                type:"POST",
                url:"demo.php",
                data:{"username":username},//提交到demo.php的数据
                dataType:"json",//回调函数接收数据的格式
                success:function(msg){
                    $("#display").empty();//清空
                    data = eval("("+msg+")");//将返回的json解析成json对象
                    $("#display").html("hello: "+data.username);
                    console.log(msg);
                    console.log(data);
                },
                error:function(msg){
                    console.log("request fail:"+msg);
                }
            });
        });
    });
</script>

结果：

控制台console显示的结果：

只有转成json对象格式才能才能用.value的形式获取

改进，让php直接返回json对象就无需转换
json_encode()函数能够把数组直接转成json对象
所以，php后端代码改写为：

<?php
echo json_encode($_POST);//返回json对象格式数据
?>

html端ajax代码修改为：

$.ajax({
    type:"POST",
    url:"demo.php",
    data:{"username":username},//提交到demo.php的数据
    dataType:"json",//回调函数接收数据的格式
    success:function(msg){
        $("#display").empty();//清空
        $("#display").html("hello: "+msg.username);
        console.log(msg);
    },
    error:function(msg){
        console.log("request fail:"+msg);
    }
});

这样php后端一句代码搞定，不用自己去构造返回数据的json格式，而且script也不用把json字符串格式转成json对象
再看一下控制台的输出信息：

虽然不用再去构造返回数据的json格式，但是ajax请求时发送的表单数据也还要自己去构造。想一想，如果表单数据有一万个输入值，那么自己去构造的话。。。。
解决方法很简单：只需改变$.ajax()内的data:值就行了

data:$('#formid').serialize(),//你的表单id
//或者
data:$('#formid').serializeArray()

用控制台看看这两者的区别(为了更直观，我又加了一个input元素)：

可以看到.serialize()将表单要提交的内容序列化成一个类似URL的字符串格式，而.serializeArray()则将表单内容序列化为一个json对象的结构

---

注意：php用include或require引入前端页面时，两者是在同一个运行代码里，即都是属于主线程的。这时若用该前端页面去ajax请求该php后端脚本代码，会导致请求失败。

---

参考资料：

• 利用ajax实现与php数据交互，并局部刷新页面
• jQuery 序列化表单数据 serialize() serializeArray()