十二、市场活动：修改-CSDN博客

本文链接：https://blog.csdn.net/jbkjhji/article/details/130114826

该文详细描述了如何实现用户通过前端界面修改市场活动的流程，包括查询指定ID的市场活动、使用Ajax异步提交修改信息、后端服务更新数据库以及处理成功或失败的反馈。涉及到的关键技术包括Ajax请求、MyBatis的SQL映射、表单验证和页面状态维护。

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

功能需求

①、用户在市场活动主页面,选择要修改的市场活动,点击"修改"按钮,弹出修改市场活动的模态窗口;

②、用户在修改市场活动的模态窗口填写表单,点击"更新"按钮,完成修改市场活动的功能.

③、 *每次能且只能修改一条市场活动

④、*所有者动态的

⑤、*表单验证(同创建)

⑥、 *修改成功之后,关闭模态窗口,刷新市场活动列表,保持页号和每页显示条数都不变

⑦、*修改失败,提示信息,模态窗口不关闭,列表也不刷新

一、实现id查询

ActivityMapper

1.activityMapper接口

  /**
     * 根据id查询市场活动
     */
    Activity selectActivityById(String id);

2.activityMapper映射文件

根据id查询的sql语句

    <!--  Activity selectCountOfActivityById(String id);-->
    <select id="selectActivityById" resultMap="BaseResultMap" parameterType="java.lang.String">
        select
        <include refid="Base_Column_List"/>
        from tbl_activity
        where id = #{id}
    </select>

ActivityService

	/**
	 * 根据id查询市场活动
	 */
	Activity queryActivityById(String id);

	@Override
	public Activity queryActivityById(String id) {
		return activityMapper.selectActivityById(id);
	}

ActivityController

异步查询返回一个json对象

	/**
	 * 根据id修改--1查询
	 */
	@RequestMapping("/workbench/activity/selectActivityById.do")
	public @ResponseBody
	Object selectActivityById(String id) {
		Activity activity = activityService.queryActivityById(id);
		return activity;
	}

前端workbench/activity/index.jsp

1.点击修改按钮，绑定单击事件，进行请求查询

var checkedIds = $("#tBody input[type='checkbox']:checked");点击选中的checkbox，存放到checkedIds数组里面

checkedIds.size()选中的数量。如果是1进行查询

var id = checkedIds[0].value;获取选中的id值

$("#id").val（data.属性）向选中id赋值，进行文本填充

 $("#editActivityBtn").click(function () {
                //收集参数获取选中的checkbox
                var checkedIds = $("#tBody input[type='checkbox']:checked");
                if (checkedIds.size() == 0) {
                    alert("请选择修改的事件");
                    return;
                }
                //只能选择1个
                if (checkedIds.size() == 1) {
                    var id = checkedIds[0].value;
                    //1发送请求
                    $.ajax({
                        url: 'workbench/activity/selectActivityById.do',
                        data: {
                            id: id
                        },
                        type: 'post',
                        // 2处理响应
                        dataType: 'json',
                        success: function (data) {
                            //查询成功
                            $("#edit-id").val(data.id);
                            $("#edit-marketActivityOwner").val(data.owner);
                            $("#edit-marketActivityName").val(data.name);
                            $("#edit-startTime").val(data.startDate);
                            $("#edit-endTime").val(data.endDate);
                            $("#edit-cost").val(data.cost);
                            $("#edit-describe").val(data.description);
                            // 弹出创建市场模态窗口
                            $("#editActivityModal").modal("show");
                        }
                    });
                } else {
                    alert("只能选择一条修改");
                    return;
                }
            });

二、点击保存按钮

流程图

ActivityMapper

根据填写的表单，需要更新的字段是所有者ower,名称name,开始日期，结束日期，成本，描述，修改事件，修改者

    /**
     * 根据id修改市场活动
     */
    int updateActivity(Activity activity);

  <!-- int updateActivity(Map<String,Object>map);-->
    <update id="updateActivity">
        update tbl_activity
        set owner       = #{owner,jdbcType=CHAR},
            name        = #{name,jdbcType=VARCHAR},
            start_date  = #{startDate,jdbcType=CHAR},
            end_date    = #{endDate,jdbcType=CHAR},
            cost        = #{cost,jdbcType=VARCHAR},
            description = #{description,jdbcType=VARCHAR},
            edit_time   = #{editTime,jdbcType=CHAR},
            edit_by     = #{editBy,jdbcType=VARCHAR}
        where id = #{id,jdbcType=CHAR}
    </update>

ActivityService

	/**
	 * 根据id修改市场活动
	 */
	int editActivityById(Activity activity);

	@Override
	public int editActivityById(Activity activity) {
		return activityMapper.updateActivity(activity);
	}

ActivityController

封装参数，获取当前的时间和创建者的id
通过实体类接收对应的参数

/**
	 * 根据id修改--2保存
	 */
	@RequestMapping("/workbench/activity/editActivityById.do")
	public @ResponseBody
	Object editActivityById(Activity activity,HttpSession session) {
		//封装参数
		//获取当前时间
		activity.setEditTime(DateUtils.formateDateTime(new Date()));
		//获取session的id
		User user = (User) session.getAttribute(Contants.SESSION_USER);
		activity.setEditBy(user.getId());
		//调用Service
		ReturnObject returnObject = new ReturnObject();
		try {
			int ret = activityService.editActivityById(activity);
			if (ret>0){
				returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
			}else {
				returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
				returnObject.setMessage("系统繁忙，稍后再试");
			}
		} catch (Exception e) {
			e.printStackTrace();
			returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
			returnObject.setMessage("系统繁忙，稍后再试");
		}
		return returnObject;


	}

前端

$("#pagDiv").bs_pagination('getOption', 'currentPage'),获取当前页

$("#pagDiv").bs_pagination('getOption', 'rowsPerPage')，获取每页显示的数量
调用的翻页函数

            //修改 2 保存
            $("#updateSaveBtn").click(function () {
                //2.1封装参数
                var id = $("#edit-id").val();
                var name = $.trim($("#edit-marketActivityName").val());
                var owner = $("#edit-marketActivityOwner").val();
                var startDate = $("#edit-startTime").val();
                var endDate = $("#edit-endTime").val();
                var cost = $("#edit-cost").val();
                var description = $.trim($("#edit-describe").val());
                //2.2表单验证
                if (owner == "") {
                    alert("所有者不能为空");
                    return;
                }
                if (name == "") {
                    alert("名称不能为空");
                    return;
                }
                if (startDate != "" && endDate != "") {
                    // 使用字符串大小进行日期比较
                    if (startDate > endDate) {
                        alert("开始日期不能大于结束日期");
                        return;
                    }
                }
                // 正则表达式验证成本：成本只能为非负整数
                var regExp = /^(([1-9]\d*)|0)$/;
                if (!regExp.test(cost)) {
                    alert("成本只能为非负整数");
                    return;
                }

                //2.2 发送请求
                $.ajax({
                    url: 'workbench/activity/editActivityById.do',
                    data: {
                        id: id,
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description
                    },
                    type: 'post',
                    //做出响应
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == '1') {
                            // 当前页
                            $("#editActivityModal").modal("hide");
                            queryActivityByConditionForPage($("#pagDiv").bs_pagination('getOption', 'currentPage'),
                                $("#pagDiv").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            alert(data.message);
                        }
                    }
                });
            });