gpt4 book ai didi

javascript - 如何使用 ajax 发布 json 对象?

转载 作者:行者123 更新时间:2023-11-28 10:37:20 28 4
gpt4 key购买 nike

我是一名初学者编码器,我想制作一个联系表单,将 json 对象发送到另一个 php 文件。这是我当前的代码

[...]
<body>
<form id="form" class="formular">
<div class="input-group">
<input id="phone" type="tel" class="form-control" name="phone" placeholder="phone" required>
</div>
<br>
<div class="input-group">
<input type="email" id="email" class="form-control" name="email" placeholder="mail" required>
</div>
<br>
<div class="input-group">
<textarea id="message" class="form-control" placeholder="message..." required></textarea>
</div>
<button id="form_submit_button" name="form_submit_button">Send!</button>
</form>
</body>
</html>


<?php
?>

<script>

jQuery(document).ready(function($) {
$("#form_submit_button").click(function (event) {
event.preventDefault();

$.ajax({
type: 'POST',
url: 'test.php',
data: JSON.stringify({ Form: $('#form').val }),
contentType: "application/json; charset=utf-8",
dataType: "json",
})



});
});



</script>

test.php 简单来说就是: var_dump($_POST);当然它总是 0。有人可以帮助我吗:)

最佳答案

您想要做的是使用 AJAX 发送表单的内容。正如 NVRM 所指出的,您不需要使用 jQuery 来执行此操作。您可以使用 native 获取功能。

const form = document.getElementById('form');

form.onsubmit = (e) => {
e.preventDefault();

const phone = document.getElementById('phone').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

const data = new FormData();
data.append('phone', phone);
data.append('email', email);
data.append('message', message);

fetch("test.php", {
method: "POST",
body: data
});
}
<form id="form" class="formular">
<div class="input-group">
<input id="phone" type="tel" class="form-control" name="phone" placeholder="phone" required>
</div>
<br>
<div class="input-group">
<input type="email" id="email" class="form-control" name="email" placeholder="mail" required>
</div>
<br>
<div class="input-group">
<textarea id="message" class="form-control" placeholder="message..." required></textarea>
</div>
<button id="form_submit_button" name="form_submit_button">Send!</button>
</form>

首先,将每个表单字段的值放入变量中,然后将它们插入到 FormData 对象中。然后使用 fetch 函数将 FormData 对象发送到服务器,可以通过 $_POST 变量访问该对象。

您最初的内容是 $('#form').val() ,它不会返回任何内容,因为 #form 是表单元素,它不会返回任何内容t 有一个值。

关于javascript - 如何使用 ajax 发布 json 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59380212/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com