Ajax 不会向 php 表单发起 POST 请求答案

【问题标题】：Ajax won't initiate POST request to php formAjax 不会向 php 表单发起 POST 请求
【发布时间】：2018-10-18 01:14:03
【问题描述】：

由于某种原因，我的表单不会发布，关于原因的任何想法（我已经知道我的服务器上的其他所有东西都可以运行）？代码如下：

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/

（以上未提供的任何信息将根据要求在 cmets 中提供）

【问题讨论】：

控制台有错误吗？您确定values 与您的表单的序列化值有关吗？

标签： javascript php jquery ajax forms

【解决方案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>

【讨论】：

好的，我明天早上试试，然后报告

【解决方案2】：

事实证明，您的表单实际上是通过 GET 请求正常发送的（您可能会看到页面重新加载）。当表单内的按钮没有指定类型（默认为提交）时会发生这种情况。

表单中“提交”类型的按钮提交表单，而“按钮”类型的按钮则不提交。

只需将属性 type="button" 添加到您的按钮，您的问题应该会得到解决。

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

【讨论】：

【解决方案3】：

在你的php端调试数据是否真的来了

<?php
header('Content-Type: application/json');
echo json_encode($_POST);

然后在你的 js 上

$.post('form.php', values, function(response) {
   console.log(response); // return json
});}

【讨论】：