jsp + jquery + json

来源：互联网发布：抢购软件编辑：程序博客网时间：2024/04/30 23:34
<%@ page import="com.qunar.fresh.service.Cookies" %><%@ page import="com.qunar.fresh.dao.UserInfoStrings" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>update user info</title>    <style>        body{            width: 100%;            position: relative;            margin: auto;        }        h2{            width: 20%;            text-align: center;            margin: auto;            margin-top: 2em;        }        form{            width: 20%;            min-width: 200px;            text-align: center;            margin: auto;            margin-top: 2em;        }        input{            width: 200px;            margin-bottom: 0.5em;        }        input[type=submit]{            margin-top: 1em;        }        #feedback_div{            width: 100%;            text-align: center;            margin: auto;            margin-top: 2em;        }        #feedback{            width: 100%;            text-align: center;        }        a{            color: dodgerblue;        }    </style>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    <script type="text/javascript">        function getJsonFromInputs(inputArray) {            jsonStart = "{";            jsonEnd = "}";            jsonBody = "";            for (index in inputArray) {                name = inputArray[index];                value = $("input[name=" + name + "]").attr("value");                console.log(name + ":" + value);                jsonBody = jsonBody + "\"" + name + "\"" + ":" + "\"" + value + "\"";                if (index != inputArray.length - 1) {                    jsonBody += ",";                }            }            result = jsonStart + jsonBody + jsonEnd;            return result;        }        function _submit() {            $.ajax({                type: "POST",                url: "update.json",                contentType: "application/json;charset=UTF-8",                data: getJsonFromInputs(["user_id", "nickname", "realname", "email"]),                dataType: "json",                success: function (data) {                    $("#feedback").html("信息更新成功，点击<a href='/home.jsp'>此处</a>返回。");                }            })        }    </script></head><body><h2>信息更新</h2><form id="uppdate_form">    <input type="text" name="user_id" readonly ="readonly" value="<% out.print(Cookies.getCookieValue(request,UserInfoStrings.userId)); %>" placeholder="user id"/><br/>    <input type="text" name="nickname" placeholder="nickname"/><br/>    <input type="text" name="realname" placeholder="real name"/><br/>    <input type="email" name="email" placeholder="email"/><br/>    <input type="button" value="update" id="update_button" onclick="_submit()"/><br/></form><div id="feedback_div">    <label id="feedback">    </label></div></body></html>
0 0