无需刷新AJAX即可提交按钮吗？

我有一个很简单的聊天问题。该页面通过AJAX进行持续刷新，超时时间为750毫秒。如果我按下或使用回车来提交我的'反应'，页面刷新：是否有一种方法可以将其删除，以便您可以立即看到您发布的内容？无需刷新AJAX即可提交按钮吗？

你可以在我的网站上看到聊天：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>'; 
    } 
} 
?>

如果我的问题不清楚请说说。是否有关于良好间距的话题/问题/文章？谷歌翻译为“缩进”。谢谢

来源

2012-01-03 JochemQuery

更换

<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/

来源

2012-01-03 12:46:04 Usman

谢谢，但如果我将我的更改为你的答案，它完全停止工作。我应该添加一些js吗？ – JochemQuery 2012-01-03 12:51:07

做你想做的事在callcack函数中'

我得到了萤火虫的错误：在你编辑后，submitenter没有定义。 – JochemQuery 2012-01-03 12:58:31

在JS中添加e.preventDefault();。

来源

2012-01-03 12:43:32 Dion

您希望采取的措施是防止其他答案提及的onSubmit操作。目前你的脚本还没有准备好阻止提交，因为你没有ajax post方法。

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

你想创造这样

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

，然后从事件处理程序像onsubmit="return send()"和到位的myfield.form.submit()在按键时的处理程序调用它。

来源

2012-01-03 14:26:46

谢谢，我会稍后再看！ – JochemQuery 2012-01-03 15:30:44

无需刷新AJAX即可提交按钮吗？

回答

相关问题