jquery动态刷新局部表单

想实现一个效果就是选择某个年份:然后再action中按该年份查找数据库中的数据,返回到页面表单中显示。

1.添加登记年度的changge事件,也是异步请求。

$(document).ready(function ()
        {
             $("#registYear").change(function() {
               $.ajax({
                   // 后台处理程序
                   url : "FindThesis.action",
                   // 数据发送方式
                   type : "post",
                   // 接收数据格式
                   dataType : "json",
                   // 要传递的数据
                   data : "registYear="+$("#registYear").val(),
                   // 回传函数
                    timeout:20000,// 设置请求超时时间(毫秒)。
                    error: function () {//请求失败时调用函数。
                        alert("请求失败");
                    },
                    success:function(data){ //请求成功后回调函数。
                        //location="person-thesis.jsp";
                        //alert(data.htmlData);
                        $("#thesisList").append(data.htmlData);
                   }
           });
        });
     }); 

注意:这里的dataType要用json。

2.在Action中定义一个htmlString字符串。并添加get set方法。因为这样可以在success:的data数据中得到Action返回的数据。

然后再Action中拼接htmlString字符串:

List<PersonThesis> list = personThesisBiz.findByRegistYear(application.get("id").toString(), registYear);

        if(list.size()>0)
        {
            PersonThesis personThesis ;
            StringBuffer buffer = new StringBuffer();
            buffer.append("<tr class=\"demo\"><td>");
            for(int i=0;i<list.size();i++)
            {
                personThesis = list.get(i);
                buffer.append(i+"</td><td>"+personThesis.getThesisName()+"</td><td>"+personThesis.getThesisQuality())
                .append("</td><td>"+personThesis.getJournal()+"</td><td>"+personThesis.getNum()+"</td><td>")
                .append(personThesis.getTime()+"</td><td>"+personThesis.getThesisType()+"</td><td>")
                .append(personThesis.getGrade()+"</td><td>"+personThesis.getRemark()+"</td>")
                .append("<td><a href=\"FindThesis.action?index="+i+ " id=\"thesis\">编辑</a></td>")
                .append("<td><a href=\"FindThesis.action?index="+i+" id=\"thesis\">删除</a></td></tr>");
            }
            htmlData = buffer.toString();

3.在struts.xml中配置该action时,配置方式如下:

<package name="programInjection" extends="json-default">
        <action name="FindThesis" class="stdu.edu.cn.web.action.FindThesisAction" method="find">
            <result type="json"></result>
        </action>

    </package>

4.在返回成功时,动态添加行,就可以了

时间: 2024-10-14 12:45:15

jquery动态刷新局部表单的相关文章

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

jQuery控制form表单元素聚焦

CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ function makeFirstTextFormElementFocused (formId) { $('#' + formId + ' :text').eq(0).focus(); } 测试: window.onload = function() { makeFirstTextFormElementFoc

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

Jquery异步提交表单到Action

转载请注明出处:jiq?钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数. 效果如下: 现在的需求是:我要在编

第一百八十五节,jQuery,Ajax 表单插件

jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 Ajax 提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素 到决定如何管理提交进行的功能.

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对&lt;name&amp;value&gt;格式和JSON格式。

http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式. /// <reference name="jquery.js" description="1.3.2版本以上" /> /*!* 扩展jQuery表单序列化函数:{ Version: 1.2, Author: Eric

自己编写jQuery插件 之 表单验证

吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkFor