提交按钮可以在不刷新AJAX的情况下工作吗?

时间:2012-01-03 12:38:31

标签: php javascript ajax

我的聊天非常简单。该页面使用AJAX持续刷新,超时为750毫秒。如果我按或使用回车提交我的“反应”,页面会刷新:有没有办法删除它,以便您可以立即看到您发布的内容?

您可以在我的网站上看到聊天内容:chat

代码:
的index.php

<!DOCTYPE HTML>
<?php include 'config.php'; ?>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.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;
}


</script>

    <title>JavaScript Chat</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>
    <div class="container">
        <div id="chatwindow">

        </div>

        <div class="inputMessage">
            <form method="post">


    enter code here

            <hr></hr>
                <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                <input type="text" value="" name="username" />
                <input type="submit" value="verstuur" name="submit" onKeyPress="return submitenter(this,event)" />

            </form>
            <?php   include 'send.php'; ?>      
        </div>

        <script type="text/javascript">
          $(document).ready(function(){
            setInterval ( "get()", 750 );
          });
          function get(){
             $.ajax({
               type: 'GET',
               url: 'chat.php',
               success: function(data){
                 $("#chatwindow").html(data);
               }
             });
          }
        </script>
</div>
</body>
</html>

chat.php

<?php
    include 'config.php';
    $result = mysql_query("select * from Message");
    while($row = mysql_fetch_array($result))
    {
        echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
    }
?>  

send.php

<?php 

if(isset($_POST['submit'])) 
    {
    if (!empty($_POST['username']))
        {
            if(!empty($_POST['message']))
            {
                $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                mysql_query($query);
            }
            else
            {
            echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
            }
        }
    else
    {
        echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
    }
}
?>

如果我的问题不明确请说出来。 有关于良好间距的主题/问题/帖子吗?谷歌将其翻译为“缩进”。 感谢

3 个答案:

答案 0 :(得分:3)

替换

<form method="post">

使用

 <form onsubmit="event.preventDefault()" method="post">

你也可以在这里使用你的回调函数:

 <form onsubmit="event.preventDefault();return submitenter(this,event);" method="post">

工作演示: http://jsfiddle.net/usmanhalalit/5RCwF/2/

答案 1 :(得分:1)

在JS中添加e.preventDefault();

答案 2 :(得分:0)

您希望的操作是阻止onSubmit操作,正如其他答案所提到的那样。目前你的脚本还没有准备好阻止提交,因为你没有ajax post方法。

您仍需要应用程序提交方的ajax功能。为此,您可以使用jQuery post()

您想要创建类似

的内容
function send() {
    $.post(); // Fill in appropriate post() code.
    return false;
}

然后从您的按键处理程序中的onsubmit="return send()"等事件处理程序中调用它,代替myfield.form.submit()