自己写的Jquery form ajax 事例-优快云博客

本文介绍了一个简单的示例，展示了如何利用Ajax技术和jQuery库实现网页表单的异步提交，并更新页面内容而无需刷新整个页面。具体包括设置HTML结构、引入必要的JavaScript文件、编写jQuery代码来处理表单提交及显示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面：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">
                 Name:  
                <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;">
             Name:  
            <span id="name"></span>
            <br />
            Comment:
            <span id="comment"></span>
            <br />
            <input type="submit" value="修改" οnclick="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;
    }