在不刷新整个页面的情况下提交表单数据

Submit form data without refreshing entire page

提问人:Lori 提问时间:10/9/2014 最后编辑:Lori 更新时间:10/11/2014 访问量:1536

问:

这个简单的聊天有效,除非我提交表格;整个页面将重新加载。我只需要表单本身将数据提交到数据库并清除表单。显示输出的 div 会自动刷新,而不会出现任何问题。几天来,我已经尝试了所有可以想象的包含、div、框架等变体。如果我将表单与包含 div 的页面分开,它会起作用......但我需要所有内容都在一页上。

下面是 HTML:

<% @LANGUAGE = "VBScript" %>
<!-- #INCLUDE VIRTUAL="000_scripts/asp/chat_config.asp" -->
<!-- #INCLUDE VIRTUAL="chat_scripts.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="chat.js"></script> 
    </head>
    <body>
        <div id="div_db1">not loading db1</div>

        <form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
            <textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
            <input type="submit" value="send" onClick="submitform()">
        </form>

    </body>
</html>    

下面是 JS:

function submitenter(myfield,e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;

    if (keycode == 13)
    {
        myfield.form.submit();

        return false;
    }
else
    return true;
}


function submitForm() {
    var frm = document.getElementsByID('Send_Chat')[0];
    frm.submit(); // Submit
    frm.reset();  // Reset
    return false; // Prevent page refresh
}

$.ajaxSetup ({
    cache: false
});

$(document).ready(function(){
    setInterval(function(){
        $('#div_db1').load('viewalldb3.asp'); 
     }, 50);
});

window.onload = function() {
    var input = document.getElementById("T_Body_FieldID").focus();
}
JavaScript jQuery HTML ASP-经典

评论

2赞 Alfredo Delgado 10/9/2014
立即引起注意的一件事是,您正在单击调用,但您的函数被命名为 .submitform()submitForm()

答:

-1赞 Egli Becerra 10/9/2014 #1

嘿,你能试试这个吗?

而不是拥有

<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
    <textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
    <input type="submit" value="send" onClick="submitform()">
</form>

有这个

<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
    <textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
    <span onClick="submitform()">Send</span>
</form>

这样,您的按钮就不会回发,只需确保您用按钮外观设置跨度样式,然后您应该没问题:)即使使用您现有的代码,我认为......给它一个裂缝

评论

0赞 user692942 10/9/2014
它只是使用 Forms 事件来处理代码中的提交。为什么要使用 a 如果你要这样做,为什么不直接使用 or ?<input type="submit" />submit<span><button><input type="button" />
1赞 jordaniac89 10/9/2014 #2

使用 jquery.post。你可以通过点击按钮来完成,所以

 $(":button").click(function(){
       $.post({url where data is posted}, formData)

评论

0赞 user692942 10/9/2014
正确答案,但不是一个很好的答案。
1赞 jordaniac89 10/9/2014
我真的只是想给他指明正确的方向。其中大部分都可以通过简单的谷歌搜索来弄清楚。我不会为他/她写代码。
1赞 Birgit Martinelle 10/9/2014 #3

您必须防止 submit 事件冒泡,以避免默认的页面刷新行为。

因此,您的代码需要更改为如下所示(我将事件处理程序赋值移至 JavaScript,因为它更简洁)

$('#Send_Chat').on('submit', function(e){
  e.preventDefault(); //this prevents the refresh because it cancels the default event bubbling
  $.ajax({ //make sure your form data gets to the server ...
   type: "POST",
   url: <% toDB() %>,
   data: $(this).serialize(),
   success: function() {
     //done - you've submitted your message
   }
});

$('#T_Body_FieldID').on("keydown", function() {
  if (event.keyCode == 13) {
    $('#Send_Chat').submit(); // Submit form code
  }
});

和你的 HTML

<form name="Send_Chat" id="Send_Chat" action="#" method="post">
    <textarea name="T_Body_Field" id="T_Body_FieldID"></textarea>
    <input type="submit" value="send">
</form>
0赞 Lori 10/11/2014 #4

我尝试了所有这些建议,不幸的是,它们都不适合我。不过我很感激!我终于通过将表单放入 iframe 中来让它工作。