实现模态框中输入数据提交到页面

最新推荐文章于 2022-10-14 15:40:59 发布

原创最新推荐文章于 2022-10-14 15:40:59 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何实现在网页模态框中输入数据，并通过Ajax技术提交到页面上的具体步骤，包括创建点击事件、编写模态框HTML、实现Ajax请求以及后台controller的处理方法。

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

1、在操作中创建点击标签

 <a class="btn btn-info btn-xs " data-id="${wefineDoctor.id}" data-toggle="modal" data-target="#myModal" onclick="reject('${wefineDoctor.id}')">设置排序</a>

2、模态框代码

 <!-- 模态框（Modal） -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					医生排序
				</h4>
				<form id="sortForm">
				   <div class="modal-body col-sm-5" >
				   <input type="hidden" name="id" id="id" value="">
			       <input type="text" placeholder="请输入排序数字" name="sorts" id="sorts" value="" class="input-sm form-control">
				   </div>
			    </form>
            </div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
				        关闭
				</button>
				<button type="button" class="btn btn-primary" id="reject" data-dismiss="modal">
					提交
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

3、书写ajax

 /*设置排序*/
     $("#reject").click(function(){ 
    	var data=$("#sortForm").serialize();
    	$.ajax({
    		url:"${base}/admin/wefine_doctor/updateSorts.jhtml",
    		type:"post",
    		dataType:"json",
    		data:data,
    		success:function(message){
    			art.message(message);
					if (message.type == "success") {
						window.setTimeout(function() {
							window.location.reload();
						}, 500);
					}
    		}
    	});
    });
    
     function reject(id){
    	 $("#id").val(id);	
     };

4.书写controller层

/*设置排序*/
	@RequestMapping(value = "/updateSorts",method = RequestMethod.POST)
	public @ResponseBody Message updateSorts(WefineDoctor wefineDoctor, RedirectAttributes redirectAttributes){
		wefineDoctorService.update(wefineDoctor);
		addFlashMessage(redirectAttributes, SUCCESS_MESSAGE);
		return SUCCESS_MESSAGE;
	}