Отправить данные формы с помощью jquery ajax json

Я новичок в PHP/jquery Я хотел бы спросить, как отправить данные json из поля формы, например (имя, возраст и т.д.) С помощью ajax в формате json. К сожалению, я не могу найти какой-либо соответствующей информации об этом, даже это можно сделать динамически? Поисковые запросы Google дают ответы только наподобие создания данных вручную. например: name: X Y, age: 32 и т.д.

Есть ли способ сделать это?

Спасибо за помощь!

Edit:

<form action="test.php" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input type="submit">
</form>

Ответы

Ответ 1

здесь простой

вот мой test.php только для тестирования

<?php

// this is just a test
//send back to the ajax request the request

echo json_encode($_POST);

вот мой index.html

<!DOCTYPE html>
<html>

<head>

</head>
<body>

<form id="form" action="" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input id="submit" type="button" name="submit" value="submit">
</form>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        // click on button submit
        $("#submit").on('click', function(){
            // send ajax
            $.ajax({
                url: 'test.php', // url where to submit the request
                type : "POST", // type of action POST || GET
                dataType : 'json', // data type
                data : $("#form").serialize(), // post data || get data
                success : function(result) {
                    // you can see the result from the console
                    // tab of the developer tools
                    console.log(result);
                },
                error: function(xhr, resp, text) {
                    console.log(xhr, resp, text);
                }
            })
        });
    });

</script>
</body>
</html>

Оба файла помещаются в один каталог

Ответ 2

Вы можете использовать serialize() следующим образом:

$.ajax({
  cache: false,
  url: 'test.php',
  data: $('form').serialize(),
  datatype: 'json',
  success: function(data) {

  }
});

Ответ 3

Отправка данных с полей формы обратно на сервер (php) обычно выполняется методом POST, который можно найти в суперглобальном массиве $_POST внутри PHP. Нет необходимости преобразовывать его в JSON, прежде чем отправлять его на сервер. Маленький пример:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST')
{
    echo '<pre>';
    print_r($_POST);
}
?>
<form action="" method="post">
<input type="text" name="email" value="[email protected]" />
<button type="submit">Send!</button>

С AJAX вы можете делать то же самое, только без обновления страницы.

Ответ 4

Принятый ответ здесь действительно делает json из формы, но содержимое json на самом деле является строкой с содержимым в кодировке URL.

Чтобы сделать JOST POST более реалистичным, используйте решение от Serialize data form до JSON, чтобы создать функцию formToJson и добавьте contentType: 'application/json;charset=UTF-8' к параметрам вызова jQuery ajax.

$.ajax({
    url: 'test.php',
    type: "POST",
    dataType: 'json',
    data: formToJson($("form")),
    contentType: 'application/json;charset=UTF-8',
    ...
})