1. 程式人生 > >form表單ajax提交json資料

form表單ajax提交json資料

前端頁面:

<form id="userInfo" >
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="請輸入姓名">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">年齡</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="age" name="age" type="number" placeholder="請輸入年齡">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="address" name="address" type="text" placeholder="請輸入地址">
            </div>
        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">確定</a>
        </div>
    </form>

ajax請求傳送資料

 $("#saveUserInfo").click(function() {
        var formObject = {};
        var formArray =$("#userInfo").serializeArray();
        $.each(formArray,function(i,item){
            formObject[item.name] = item.value;
        });
        $.ajax({
            url:"user/addUser",
            type:"post",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formObject),
            dataType: "json",
            success:function(data){
                alert(data.msg);
            },
            error:function(e){
                alert("錯誤!!");
            }
        });
    });