`

自己写的Jquery form ajax 事例

AjaxjQueryJavaScriptJSPHTML 
阅读更多

页面：index.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>My JSP 'index.jsp' starting page</title>
        <script type="text/javascript" src="js/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myForm").ajaxForm(function(o){
                    var aa = eval("(" + o + ")");
                    $("#show").slideDown("slow");
                    $("#name").html(""+aa.name+"");
                    $("#comment").html(""+aa.comment+"");
                    $("#myForm").hide();
                });   
            });
           
            function edit(){
                $("#show").hide();
                $("#myForm").slideDown("slow");
            }
        </script>
    </head>   
    <body>
        <div id="input">
            <form id="myForm" action="ajax.do" method="post">
                &nbsp;Name:&nbsp;&nbsp;
                <input type="text" name="name" />
                <br />
                Comment:
                <textarea name="comment"></textarea>
                <br />
                <input type="submit" value="保存" />
                <br />
            </form>
        </div>
        <div id="show" style="display: none;">
            &nbsp;Name:&nbsp;&nbsp;
            <span id="name"></span>
            <br />
            Comment:
            <span id="comment"></span>
            <br />
            <input type="submit" value="修改" onclick="edit()"/>
            <br />
        </div>
        <br />
    </body>
</html>
类:AjaxAction

/**
     * Method execute
     *
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {
        try {

            JSONObject jobject = new JSONObject();
            try {
                jobject.append("name", request.getParameter("name"));
                jobject.append("comment", request.getParameter("comment"));

            } catch (JSONException e) {
                e.printStackTrace();
            }
            response.setContentType("text/html");
            response.setHeader("Cache-Control", "no-cache");
            response.setCharacterEncoding("utf-8");
            response.getWriter().write(jobject.toString());

        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }

  • js.zip (42.4 KB)
  • 下载次数: 11
分享到：
| 关闭按钮图标
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics