使用javascript保存表单中的数据

我有一个用codeigniter制作的聊天盒，可以很好地处理静态数据，但我想将它连接到数据库并使其成为动态的

我的要求是：

1） 当用户在聊天室凭据下输入姓名和电子邮件地址时，需要将其保存在数据库中

2） 使用电子邮件id时，需要在聊天室中显示与该电子邮件id相关的数据

3） 输入的电子邮件id还需要与聊天室消息链接，以便用户发送的任何消息都保存在其电子邮件id下

查看页面上的代码（index.php）：

.chatbox{
位置：固定；
底部：0；
右：30px；
宽度：300px；
高度：400px；
背景色：#fff；
字体系列：“Lato”，无衬线；
-webkit过渡：所有600ms立方贝塞尔（0.19,1,0.22,1）；
过渡：所有600ms三次贝塞尔（0.19,1,0.22,1）；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
}
.聊天室--托盘{
底部：-350px；
}
.聊天室--关闭{
底部：-400px；
}
.chatbox.form控件：焦点{
边框颜色：#1f2836；
}
.聊天室名称，
.聊天室{
边框底部：无；
}
.聊天室名称{
最小高度：50px；
右边填充：10px；
背景色：#1f2836；
边框左上半径：4px；
边框右上角半径：4px；
光标：指针；
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：居中；
对齐项目：居中；
}
.聊天室标题h5{
高度：50px；
利润率：0.15px；
线高：50px；
位置：相对位置；
左侧填充：20px；
-webkit-flex-grow:1；
柔性生长：1；
}
.聊天室标题h5 a{
颜色：#fff；
最大宽度：195px；
显示：内联块；
文字装饰：无；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.聊天室标题h5：之前{
内容：''；
显示：块；
位置：绝对位置；
最高：50%；
左：0；
宽度：12px；
高度：12px；
背景#4CAF50；
边界半径：6px；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
.chatbox\uuuu title\uuuu托盘，
.chatbox\u标题\u关闭{
宽度：24px；
高度：24px；
大纲：0；
边界：无；
背景色：透明；
不透明度：0.5；
光标：指针；
-webkit转换：不透明度200ms；
过渡：不透明度200ms；
}
.chatbox\uuuu title\uuuu托盘：悬停，
.chatbox\u title\u关闭：悬停{
不透明度：1；
}
.chatbox\uuu title\uuu托盘跨度{
宽度：12px；
高度：12px；
显示：内联块；
边框底部：2倍实心#fff
}
.chatbox\uuu title\uuu关闭svg{
垂直对齐：中间对齐；
笔划线头：圆形；
笔划线条连接：圆形；
笔画宽度：1.2px；
}
.聊天室，
.chatbox\u凭据{
填充：15px；
边界顶部：0；
背景色：#F5；
左边框：1px实心#ddd；
右边框：1px实心#ddd；
-webkit-flex-grow:1；
柔性生长：1；
}
.chatbox\u凭据{
显示：无；
}
.chatbox\u凭据.窗体控件{
-webkit盒阴影：无；
盒影：无；
}
.聊天室{
溢出y：自动；
}
.chatbox\u正文\u消息{
位置：相对位置；
}
.chatbox\u正文\u消息p{
填充：15px；
边界半径：4px；
字体大小：14px；
背景色：#fff；
-webkit盒阴影：1px1pRGBA（1001001000.1）；
盒影：1px1pRGBA（1001001000.1）；
}
.chatbox\uuuu body\uuuu消息img{
宽度：40px；
高度：40px；
边界半径：4px；
边框：2个实心#fcfc；
位置：绝对位置；
顶部：15px；
}
.chatbox\uuuu body\uuuu消息--左p{
左边距：15px；
左侧填充：30px；
文本对齐：左对齐；
}
.chatbox\uuuuu body\uuuuu消息--左img{
左：-5px；
}
.chatbox\uuuuu body\uuuuu消息--右p{
右边距：15px；
右侧填充：30px；
文本对齐：右对齐；
}
.chatbox\uuuuu body\uuuuu消息--右img{
右：-5px；
}
.chatbox\u消息{
填充：15px；
最小高度：50px；
大纲：0；
调整大小：无；
边界：无；
字体大小：12px；
边框：1px实心#ddd；
边框底部：无；
背景色：#fefe；
}
.聊天室--空的{
高度：262px；
}
.chatbox--空。chatbox--托盘{
底部：-212px；
}
.chatbox--empty.chatbox--closed{
底部：-262px；
}
.chatbox--空的.chatbox\u体，
.chatbox--空的.chatbox\u消息{
显示：无；
}
.chatbox--空.chatbox\u凭据{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者

无尾蜗牛，小尾蜗牛，弧门

该公司的首席执行官兼首席执行官奥纳雷·布兰迪（ornare blandit ante maximus）

马萨酒后驾车，萨皮安·塞德，弗林利亚·莫莱斯蒂·胡斯托

给孕妇做手术。毛里斯·埃利芬德，特卢斯·ac·弗林利亚饮食，奥迪奥·多洛·索达莱斯·利伯罗，马蒂斯·艾利特·毛里斯·艾拉特。菲塞勒斯·利奥·尼西，康瓦利斯在尤伊斯莫德，康塞特图尔·乌尔纳

姓名：
电邮：
进入聊天室

您将需要AJAX来正确、优雅地运行您的例程。我一个字也没看到。你已经考虑过，正在回避，还是不知道@Carlos Alexandre我尝试过使用ajax，但是如果我使用它，它会妨碍聊天室的功能。你必须使用ajax+轮询或nodejs+套接字。若要在数据库中持久保存聊天数据

<div class="chatbox chatbox--tray chatbox--empty">
    <div class="chatbox__title">
        <h5><a href="#">Customer Service</a></h5>
        <button class="chatbox__title__tray">
            <span></span>
        </button>
        <button class="chatbox__title__close">
            <span>
                <svg viewBox="0 0 12 12" width="12px" height="12px">
                    <line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line>
                    <line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line>
                </svg>
            </span>
        </button>
    </div>
    <div class="chatbox__body">
        <div class="chatbox__body__message chatbox__body__message--left">
            <img src="#" alt="Picture">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="chatbox__body__message chatbox__body__message--right">
            <img src="#" alt="Picture">
            <p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p>
        </div>
        <div class="chatbox__body__message chatbox__body__message--left">
            <img src="#" alt="Picture">
            <p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p>
        </div>
        <div class="chatbox__body__message chatbox__body__message--right">
            <img src="#" alt="Picture">
            <p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p>
        </div>
        <div class="chatbox__body__message chatbox__body__message--right">
            <img src="#" alt="Picture">
            <p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p>
        </div>
    </div>
    <form class="chatbox__credentials">
        <div class="form-group">
            <label for="inputName">Name:</label>
            <input type="text" class="form-control" id="inputName" required>
        </div>
        <div class="form-group">
            <label for="inputEmail">Email:</label>
            <input type="email" class="form-control" id="inputEmail" required>
        </div>
        <button type="submit" class="btn btn-success btn-block">Enter Chat</button>
    </form>
    <textarea class="chatbox__message" placeholder="Write something interesting"></textarea>
</div>

(function($) {
    $(document).ready(function() {
        var $chatbox = $('.chatbox'),
            $chatboxTitle = $('.chatbox__title'),
            $chatboxTitleClose = $('.chatbox__title__close'),
            $chatboxCredentials = $('.chatbox__credentials');
        $chatboxTitle.on('click', function() {
            $chatbox.toggleClass('chatbox--tray');
        });
        $chatboxTitleClose.on('click', function(e) {
            e.stopPropagation();
            $chatbox.addClass('chatbox--closed');
        });
        $chatbox.on('transitionend', function() {
            if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove();
        });
        $chatboxCredentials.on('submit', function(e) {
            e.preventDefault();
            $chatbox.removeClass('chatbox--empty');
        });
    });
})(jQuery);