提交按钮可以在不刷新AJAX的情况下工作吗？
[英]Can a submit button work without refresh AJAX?
问题描述
I have a problem with my very simple chat. 
我的聊天非常简单。 The page is constanly refreshing with AJAX with an timeout of 750ms. 使用AJAX持续刷新页面的时间为750毫秒。 If I press or use enter to submit my 'reaction', the page refreshes: is there an way to remove that, so that you can instantly see what you've posted? 如果我按Enter键或使用Enter键提交我的“反应”，页面会刷新：有没有一种方法可以删除它，以便您可以立即查看已发布的内容？
You can see the chat at my website: chat 您可以在我的网站上看到聊天记录： chat
The code: 编码：
Index.php 的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 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 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>';
}
}
?>
if my question is not clear say it please. 如果我的问题不清楚，请说出来。 And is there a topic/question/post about good spacing? 并且是否有关于良好间距的主题/问题/帖子？ google translated it as "indent". 谷歌翻译为“缩进”。 Thanks 谢谢
3 个解决方案
解决方案1
3 已采纳 2012-01-03 12:46:04
Replace 更换
<form method="post">
With 同
<form onsubmit="event.preventDefault()" method="post">
You may also use your callback function here like: 您还可以在此处使用回调函数，例如：
<form onsubmit="event.preventDefault();return submitenter(this,event);" method="post">
Working demo: http://jsfiddle.net/usmanhalalit/5RCwF/2/ 工作演示： http : //jsfiddle.net/usmanhalalit/5RCwF/2/
解决方案2
1 2012-01-03 12:43:32
Add e.preventDefault(); 添加e.preventDefault(); in JS. 在JS中。
解决方案3
0 2012-01-03 14:26:46
Your desired action is to prevent the onSubmit action as the other answers have mentioned. 您希望采取的行动是防止其他答复中提到的onSubmit行动。 Currently your script isn't quite ready to block submit as you don't have an ajax post method. 目前，您的脚本尚未准备好阻止提交，因为您没有ajax post方法。
You need ajax functionality for the submission side of the application still. 您仍需要为应用程序的提交端提供ajax功能。 For this you can use jQuery post() . 为此，您可以使用jQuery post（） 。
You want to create something like 您想要创建类似
function send() {
$.post(); // Fill in appropriate post() code.
return false;
}
And then call it from your event handlers like onsubmit="return send()" and in place of myfield.form.submit() in your keypress handler. 然后从事件处理程序（如onsubmit="return send()" myfield.form.submit()中调用它，并在按键处理程序中代替myfield.form.submit() 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.