html,jquery,ajax,servlet,mysql实现前端数据写入数据库

Myeclipse下新建WebProject项目

程序仅实现前端传数据到后端写入数据库

前端html代码:

<!DOCTYPE html>
<html>
  <head>
    <title>register.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
<label>用户名:</label><input id="name" name="name" type="text" />
          <label>密码:</label><input id="password" name="password" type="password" />
          <input id="register" type="button" value="注册"/>
  </body>
  <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  <script>
          $("#register").click(function(){
              var name=$("#name").val();
              var password=$("#password").val();
              if(name!=""&&password!=""){
            $.ajax({
                type:"POST",
                url:"add",
                dataType:"JSON",
                data:{
                    "name":name,
                    "password":password,
                }
            })
        }else{
            alert("请检查您的输入!");
        }
          })

  </script>
</html>

后端Servlet代码:

package com.jquery.register;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class add extends HttpServlet {

    public void destroy() {
        super.destroy();
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            doPost(request,response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        request.setCharacterEncoding("utf-8");
         response.setCharacterEncoding("utf-8");
         Connection conn = null;
         PreparedStatement stmt = null;
         ResultSet rs = null;
         String name=request.getParameter("name");
         String password=request.getParameter("password");
         String drive = "com.mysql.jdbc.Driver";
         System.out.println("ajax后台交互成功");
         try{
             Class.forName(drive);
             conn = DriverManager
                     .getConnection("jdbc:mysql://localhost:3306/test?user=root&password=123");
             System.out.println("数据库连接成功");
             String sql="insert  into user_table(name,password)";
             sql+=" values(?,?)";
             stmt = conn.prepareStatement(sql);
             stmt.setString(1,name);
             stmt.setString(2,password);
             stmt.executeUpdate();
             System.out.println("success");
//        out.flush();
//        out.close();
    }catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                //注意关闭原则:从里到外
                    if (rs != null) {
                        rs.close();
                    }
                    if (stmt != null) {
                        stmt.close();
                    }
                    if (conn != null) {
                        conn.close();
                    }
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
    }
    public void init() throws ServletException {
        // Put your code here
    }

}

截图:

时间: 2024-10-12 20:29:31

html,jquery,ajax,servlet,mysql实现前端数据写入数据库的相关文章

jQuery+Ajax+PHP+Mysql实现分页显示数据

css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; curs

2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(function () { var UserId = $('#UserId').val(); if (UserId == "") { $.ajax({ type: "POST", url: '/Users/Create/', data: $("#SaveUserFo

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

  先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的! 介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很

通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中  先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数

Java -&gt; 把Excel表格中的数据写入数据库与从数据库中读出到本地 (未完善)

写入: private void insertFile(HttpServletRequest request, HttpServletResponse response) throws IOException { String path_member = request.getParameter("path_member"); List list = this.insert("f:/tmp001.xls", "gs_sale_members");

用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误

通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax.asp 代码: 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head runat="server"> 5 <meta http-eq

使用Jquery.AJAX方法和PHP后台数据交互小结

使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正确. 第二:在传输数据时,传输的数据格式是否正确. 第三:我遇到过 200 但是执行的是AJAX方法的错误方法,我总结了一下,一般都是PHP的数据格式不正确,所以,当遇到200 error时候,应该认真,仔细的检查PHP传输的数据格式是否争取,由于JSON的特性,所以,使用JSON的时候对数据格式规

(转)Jquery+Ajax实现Select动态定数据

解决思路: 在数据库中建立类型字典式表.将下拉框需要添加的项,在数据库表里中文.英文名称对应起来. 下拉框动态绑定数据库表中需要字段. [csharp] view plain copy <div id="bgDiv" style="display:none;"></div> <a  class="btn-lit" href="javascript:"  onclick="bgDiv.st

jquery ajax提交json格式的数据,后台接收并显示各个属性

我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span> <input type='text' placeholder='请输入用户名' name='user'></li> <li><span>密码</span> <input type='text' placeholder='请输入密码'