esayui

最新推荐文章于 2024-08-25 09:41:52 发布

求哥的马子

最新推荐文章于 2024-08-25 09:41:52 发布

阅读量108

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/qq_61620143/article/details/124116050

版权

本文介绍如何利用EasyUI实现书籍数据的增加功能。通过点击增加按钮，弹出窗口让用户输入信息，然后将数据保存到数据库。文章包括前端脚本和后端Servlet的实现细节。

摘要由CSDN通过智能技术生成

hello，大家好，我是求哥的马子，昨天有个小伙伴说：你这只有绑定数据的功能，没有添加数据的功能，所以，今天，它来啦！！！今天来给大家分享如何用easyui 实现书籍数据增加功能

效果图：

前期准备：

在主界面或绑定数据页面定义一个div

<!-- 给弹出窗口定义一个容器，并默认为隐藏，在点击后再显示 -->
	<div id="bookDiglog" style="display:none;"></div>

新建一个jsp 页面（jsp/book/editBook.jsp），(此页面只需from 表单)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
	<form id="bookForm">   
		<input type="hidden" name="id" id="id"/>
	    <div style="margin: 15px;">   
	        <label for="name">书名:</label>   
	        <input class="easyui-textbox" name="bookname"  style="width:300px" data-options="required:true"> 
	    </div>   
	    <div style="margin: 15px;">   
	        <label for="price">价格:</label>   
	        <input class="easyui-textbox" name="price"  style="width:300px" data-options="required:true"> 
	    </div>
	    <div style="margin: 15px;">   
	        <label for="booktype">类型:</label>   
	        <input class="easyui-textbox" name="booktype" style="width:300px" data-options="required:true"> 
	    </div>  
	</form>
</div>

实现思路：

当用户点击增加按钮时，弹出窗口，用户输入信息，点击保存，将书籍信息保存进数据库

		<a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a><!--增加图标  -->

script 代码

$("#addBookBtn").click(function(){
		$('#bookDiglog').dialog({    
		    title: "增加书本信息",//弹出窗口标题    
		    width: 400,    //窗口的尺寸
		    height: 250,    
		    closed: false,    
		    cache: false,    
		    href: 'editBook.jsp',    //界面
		    modal: true,
		    buttons:[{
				text:'保存',// 保存按钮
				handler:function() {
					$.ajax({
						url: ctx + "/bookAddServlet",//增加书籍信息 接收
						type: 'post', // 表单提交方式
						dataType: 'json',
						data: $("#bookForm").serialize(),/* 序列化 会自动的将 from 里面的字段自动组成json 对象 jquery 插件 */
						success: function(data) {
							if(data.success) {//增加成功 返回结果为true
								$.messager.alert('消息', '操作成功');
	    	                	$('#bookDiglog').dialog('close');//关闭 editBook.jsp
	    	                	qryBook();//重新查询
							}
						},
	    	            error : function(error) {
	    	            	console.log(error);
	    	            }
					})
				}
			}, {
				text:'关闭',// 关闭按钮 
				handler:function() {
					$('#bookDiglog').dialog("close");//关闭 editBook.jsp
				}
			}]
		});

servlet 代码

package com.zking.euidemo.servlet; 

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.euidemo.model.Book;
import com.zking.euidemo.servler.BookService;
import com.zking.euidemo.servler.IBookService;


@WebServlet("/bookAddServlet")
public class BookAddServlet extends HttpServlet {
	
	private IBookService service = new BookService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		
		String name = req.getParameter("bookname");
		String price = req.getParameter("price");
		String booktype = req.getParameter("booktype");
		
		Book book = new Book();
		book.setBookname(name);
		book.setBooktype(booktype);
		book.setPrice(price);
		
		PrintWriter out = resp.getWriter();
		
		Map<String,Object> data = new HashMap<>();
		try {
			service.addBook(book);
			data.put("success", true);
		} catch (Exception e) {
			data.put("success", false);
		}
		
		out.write(JSON.toJSONString(data));
		out.flush();
		out.close();
	}
}

代码简单绝对，求哥简单纯粹，再见，嘿嘿