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

问题在于您的按钮实际上是在提交表单（实际上是在重新提交页面，因为它是在向自己提交页面）。您需要执行以下两项操作之一：

将按钮更改为status: 200 statusText: "OK" type: 2 url: "http://localhost/api/meetings/transactionOrderId/4" _body: "0c290d50-8d72-4128-87dd-eca8b58db3fe"以防止其提交（表单元素automatically内的按钮变为提交按钮）：

type="button"

防止发生点击操作（从而防止提交）：

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

Answer 2

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

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

只需将属性type =“ button”添加到您的按钮即可解决您的问题。

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

Answer 3

在您的php端调试数据是否确实来了

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

然后在您的js上

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

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

PHP

3 个答案: