`

自己写的Jquery form ajax 事例

阅读更多

页面: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
分享到:
评论

相关推荐

    jquery form ajax 插件

    1. 初始化插件:在jQuery选择器中调用`ajaxForm`或`ajaxSubmit`方法来初始化插件。例如: ```javascript $("#myForm").ajaxForm(options); ``` 其中,`options`是一个对象,包含了各种配置参数,如成功回调、错误...

    jQuery的ajax发送FormData的方式

    form id="form"&gt; &lt;input type="text" name="username"&gt; &lt;input type="file" name="file"&gt; &lt;input type="button" id="btn" value="提交"&gt; &lt;/form&gt; [removed][removed] [removed] ...

    Ajax表单提交插件jquery form

    使用jQuery选择器选取要处理的表单,并调用`.ajaxForm()`或`.form()`方法初始化插件。 ```javascript $('#myForm').ajaxForm(options); ``` 其中,`#myForm`是表单的ID,`options`是一个可选的对象参数,用于...

    jquery form jquery.form.js

    2. 初始化表单:通过`$.ajaxForm`或`$("#formId").ajaxSubmit`来绑定表单事件。 ```javascript $("#myForm").ajaxForm({ success: function(response) { console.log('表单提交成功:', response); }, error: ...

    基于jQuery的Ajax聊天室程序

    【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用,它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页...

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解** jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous ...

    jquery+ajax例子

    在IT行业中,jQuery和Ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    Asp.Net MVC之jQuery与AJAX操作实例

    在Asp.Net MVC中,使用jQuery和AJAX进行文件上传需要额外的插件,如jQuery Form Plugin。这个插件可以处理表单提交,包括文件上传。 七、异常处理和验证 在AJAX请求中,我们可以利用ASP.NET MVC的Validation ...

    jquery form插件的各个版本

    - 初始化插件:通过`$('form').ajaxForm(options)`或`$('form').form(options)`来启用插件,并设置相应的配置选项。 - 配置选项:如`beforeSubmit`、`success`、`dataType`等,控制表单提交前后的行为和数据处理...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    使用jQuery ajax提交表单代码

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。...在提供的压缩包文件“jqueryform”中,你应该能找到一个具体示例,帮助你更好地理解和应用这些概念。

    jquery.unobtrusive-ajax.rar

    这个库利用数据属性(data-* attributes)和jQuery事件来实现Ajax功能,使得页面的异步更新更加优雅和易于维护。 在传统的Web开发中,Ajax通常需要在JavaScript代码中添加大量细节,而jQuery Unobtrusive Ajax通过...

    Jquery Ajax分页(有实例)

    **jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...

    jquery form

    jQuery Form插件是jQuery库中的一个强大工具,它极大地简化了HTML表单的处理,提供了异步提交(AJAX)功能,使得用户在无需页面刷新的情况下就能发送表单数据,提高了用户体验。这个插件依赖于jQuery核心库,如在本...

    jquery upload ajax方式

    **jQuery Upload AJAX方式详解** 在Web开发中,文件上传是一个常见的功能,传统的文件上传通常需要刷新整个页面,用户体验较差。随着Ajax技术的发展,无刷新上传文件成为可能,jQuery结合Ajax提供了一种优雅的解决...

    jquery,jquery是Ajax的一个框架

    **jQuery:Ajax 的强大工具** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了前端开发中的许多任务,尤其是处理 AJAX(Asynchronous JavaScript and XML)请求。AJAX 是一种在不刷新整个网页的情况下,...

    使用jQuery.form插件,实现完美的表单异步提交

    此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...

Global site tag (gtag.js) - Google Analytics