it-swarm.com.ru

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

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

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

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

Правка:

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

вот простой

вот мой 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>

Оба файла находятся в одном каталоге

19
Oli Soproni B.

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

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

  }
});
4
Beginner

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

Чтобы сделать JOST POST более реалистичным, используйте какое-либо решение из сериализации данных формы в 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',
    ...
})
0
Roman Susi

Отправка данных из полей формы обратно на сервер (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 вы можете делать то же самое, только без обновления страницы.

0
Frank B