JQuery和PHP按Enter键进行处理
[英]JQuery and PHP pressing enter to process
问题描述
I have the following two files request.php and response.php. 
我有以下两个文件request.php和response.php。 I used to send the request using a button 我以前用按钮发送请求
<input type="button" value="Request message" onclick="post()"/>
but now I and considering using just the "Enter"(13) key. 但现在我并考虑只使用“Enter”（13）键。
The code works, however it shows the result just for a couple of milliseconds. 代码可以工作，但是它只显示了几毫秒的结果。 In theory keydown function is working and getting the result from response, bt I dont know why just for a very short time. 理论上，keydown函数正在工作并从响应中得到结果，但我不知道为什么只是在很短的时间内。
Any tips? 有小费吗？
request.php request.php
<script type="text/javascript">
function post(){
$("#message").keydown(function (e) {
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message" onclick="post()"/><br/>
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
response.php response.php
<?php
function returnString() {
$post_msg = $_POST['postmessage'];
echo "Message entered ->", $post_msg ," <- here";
}
returnString();
?>
3 个解决方案
解决方案1
2 已采纳 2019-07-12 14:27:59
You are trying to mimic behavior that is already available by default with a form that only has one input. 您试图模仿默认情况下已经可用的行为，只有一个输入的表单。
Thus your form is submitting and reloading the page. 因此，您的表单正在提交和重新加载页面。
You don't need to listen to key event on the <input> . 您无需在<input>上侦听键事件。 Just listen for the submit event of the form and prevent the default submit process 只需监听form的submit事件并阻止默认的提交过程
$('form').submit(function(e){ e.preventDefault(); var msg = $('#message').val(); mockPost(msg).then(function(res){ $('#post_message').append('<p>' + res + '<p>') }); }) function mockPost(v){ return new Promise(function(resolve){ setTimeout(function(){ resolve('Message= ' + v) }, 200) }) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> Enter Message:<input type="text" id="message" name="message"/><br/> </form> <div id="post_message"></div>
解决方案2
1 2019-07-12 14:24:52
When you hit enter, the form is submitted. 当您按Enter键时，表单将被提交。 Just add e.preventDefault(), this way: 只需添加e.preventDefault（），这样：
function post(){
$("#message").keydown(function (e) {
e.preventDefault();
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
解决方案3
0 2019-07-12 21:10:14
I appreciate the suggestions. 我很欣赏这些建议。 So I ended up with this code, just as suggested by @misorude . 所以我最终得到了这个代码，正如@misorude所建议的那样。 Simply adding a preventDefault and using submit in form. 只需添加一个preventDefault并使用表单中的提交。 I added an "onclick" on submit in case the user wants to submit by hitting the button. 我在提交时添加了一个“onclick”，以防用户想通过点击按钮提交。 The response.php stays the same. response.php保持不变。
request.php request.php
<script type="text/javascript">
function post(){
$('form').submit(function(e){
e.preventDefault();
var message = $('#message').val();
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
<input type="submit" value="Submit" onclick="post()">
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.