时间戳

首页 > 解决方案 > 如何使用 ajax 发布 json 对象？

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

问题描述

我是初学者编码器，我想制作一个联系表单，将 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。有人可以帮我吗:)

标签： javascriptphpjqueryhtmlajax

解决方案

您要做的是使用 AJAX 发送表单的内容。正如 NVRM 所指出的，您不需要使用 jQuery 来执行此操作。您可以使用本机 fetch 功能。

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内容的表单元素，因为它没有值。

推荐阅读