javascript - Ajax不会向php表单发起POST请求

Question

由于某种原因，我的表单无法发布，有什么想法可以解释为什么吗(我已经知道我的服务器上的其他所有内容都可以运行)？代码如下:

PHP

    <?php
if(isset($_POST['field1']) && isset($_POST['field2'])) {
$data = $_POST['field1'] . '-' . $_POST['field2'] . "<br>";
$ret = file_put_contents('user.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
    die('There was an error writing this file');
}
}
?>

<小时/>

https://pastebin.com/hHeMD4Mq

<小时/>

HTML/AJAX JS

<小时/>

<form id ="form">
<p>Name:</p>
<input name="field1" type="text" id ="name" />
<h3>&nbsp;</h3>
<p>Message:</p>
<textarea name="field2" type="text" id ="message"></textarea><br/>
<button onclick="pos();">reply</button>
</form>
</td>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function pos(){
var values=$("form").serialize();
$.post('form.php', values, function(response) {
    console.log("Response: "+response);
});}
</script>

<小时/>

https://pastebin.com/eAVE8EGS

<小时/>

我网站上的演示:

jakesandbox.com/dnd/

(上面未提供的任何信息将根据评论中的要求提供)

Answer 1

问题是您的按钮实际上正在提交表单(这本质上是重新加载页面，因为它正在向自身提交)。您需要执行以下两件事之一:

1. 将按钮更改为 type="button" 以防止其提交(表单元素内的按钮 automatically 成为提交按钮):

<button type="button" onclick="pos();">reply</button>

阻止点击操作发生(从而阻止提交):

<button type="button" onclick="pos(event);">reply</button>
<script type="text/javascript">
function pos(e){
e.preventDefault();
var values=$("form").serialize();
$.post('form.php', values, function(response) {
    console.log("Response: "+response);
});}
</script>

-或-

<button type="button" onclick="pos(); return false;">reply</button>