Как отправить данные формы HTML как JSON на сервер?

Прежде всего, я знаю много вопросов с таким же названием. Я видел так много вещей, но пока у меня ничего не работает. Вот почему я открыл этот вопрос.

У меня есть два сценария в основном 1) определение "действия" и "метод" в виде HTML. 2) без "действия" и "метода" в виде HTML.

Итак, вот первый сценарий,

1) У меня есть форма с двумя полями, а именно адрес электронной почты и пароль.

вот фрагмент

<form id="login-form" action="http://192.168.52.166:6000/api/2/users/login/" method="post">

<p><label for="email">Email</label>
<input type="email" name="email" id="email"></p>

<p><label for="password">Password</label>
<input type="password" name="password" id="password"></p>

<button value="Submit" type="submit">Login</button>
</form>

Сначала, когда я отправляю форму, она отправляет все мои значения полей в кодировке URL. тип содержимого по умолчанию формы urlencoded. я знаю это. Итак, теперь я добавил ajax, чтобы отправить его как json.

вот мой фрагмент кода,

$('form').submit(function(){

    var obj = $('form').serializeJSON();

    $.ajax({
        type: 'POST',
        url: 'http://192.168.52.166:6000/api/2/users/login/',
        dataType: 'json',
        data: JSON.stringify(obj),
        contentType : 'application/json',
        success: function(data) {
            alert(data)
        }
    });

Я использую библиотеку SerializeJSON для разделения данных формы в JSON.

теперь происходит то же самое, он отправляет данные формы в виде urlencoded, в то время как он предполагает отправку в виде json на сервер.

после serializeJSON(); функция, когда я предупреждаю данные, он успешно отображается как JSON.

вот что я сделал

var obj = $('form').serializeJSON();
var jsonString = JSON.stringfy(obj);
alert(jsonString)

он успешно предупреждает меня значением json моих полей формы. но когда я использую его с jjery ajax, как показано выше в демонстрационной форме jquery, эта строка json предполагает перемещение на сервер. но это не так, вместо этого он выглядит как urlencoded.

2) Второй сценарий такой же, как и первый, но на этот раз без действия и метода формы. Сейчас происходит то, что мой метод формы действует как GET, хотя я упоминал POST в jquery.

Примечание. Я проверил все отчеты с помощью Wireshark, чтобы проверить наличие HTTP-запроса и ответа.

Что я здесь не так делаю? Я просто хочу отправить данные JSON на сервер вместо URLEncoded. Что я должен делать?

Изменить: я узнал еще одну вещь. Когда я отправляю данные формы без определения действия и метода в html-форме, я получаю следующий запрос и ответ от сервера. (эти ответы взяты из Wireshark)

OPTIONS /api/2/users/login/ HTTP/1.1
Host: 192.168.52.166:6000
Access-Control-Request-Method: POST
Origin: http://localhost
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost/app/login.html
Accept-Language: en-US,en;q=0.8,ca;q=0.6
Accept-Encoding: gzip

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Mon, 14 Nov 2016 00:55:42 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Allow: POST, OPTIONS

так что, похоже, когда я упоминаю POST в JQuery, а не в формате HTML. это не работает.

Вот что я получаю, когда использую действие и метод в HTML-форме.

POST /api/2/users/login/ HTTP/1.1
Host: 192.168.52.166:6000
Content-Length: 48
Cache-Control: max-age=0
Origin: http://localhost
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost/app/login.html
Accept-Language: en-US,en;q=0.8,ca;q=0.6
Cookie: csrftoken=M5ItY7prMtJLBZWOJAN4D9uMDs2uFz5d
Accept-Encoding: gzip

email=emjimadhu%40email.com&password=qwerty123

HTTP/1.1 201 CREATED
Server: nginx/1.4.6 (Ubuntu)
Date: Sun, 13 Nov 2016 18:11:51 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Allow: POST, OPTIONS
Set-Cookie: csrftoken=tFSyA9OSfyBi4NHoU6FVFSD7BZOE6S1a; expires=Sun, 12-Nov-2017 18:11:51 GMT; Max-Age=31449600; Path=/
Set-Cookie: sessionid=eoaq13tgrjdmsqwcke7zbhgv92dec9c3; expires=Sun, 27-Nov-2016 18:11:51 GMT; httponly; Max-Age=1209600; Path=/

Ответ найден

Прежде всего, спасибо всем, кто пытался ответить. Ни один из ответов не сработал для меня.. Это потому, что не было проблемы с кодированием. Я прочитал jquery Ajax как API и выяснил, что определение, отличное от URL-кодирования, в contentType будет активировать флаг OPTIONS вместо POST. По сути, браузер отправляет предварительный запрос с флагом OPTIONS и в зависимости от состояния HTTP сервера отправляет реальный запрос. Это происходит потому, что мой внутренний сервер не разрешает перекрестный запрос.. Вот почему у меня возникли эти проблемы.. Я нашел расширение Chrome, которое позволяет перекрестное происхождение временно.. Это решило мою проблему..

Вот ссылка на это расширение Chrome

Ссылка на расширение Chrome

Это крайне не подходящее решение.. Но если у вас такая же ситуация, как у меня, вы можете использовать это..

В моей ситуации я разработал интерфейс и имел API для выполнения запроса... Но мой сервер не разработал его... Так что источник находится далеко... В производственной среде все мои файлы будут объединены на сервере. Но сейчас, для тестирования, мне нужно было использовать это расширение для работы с моим API.

ОТВЕТЫ

Ответ 1

Вы должны изменить функцию как event-listener.

    $('#form').on('submit', function(event){

        var obj = $('form').serializeJSON();

        $.ajax({
            type: 'POST',
            url: 'http://192.168.52.166:6000/api/2/users/login/',
            dataType: 'json',
            data: JSON.stringify(obj),
            contentType : 'application/json',
            success: function(data) {
                alert(data)
            }
        });

       return false;
   });

Ответ 2

Не отправляйте форму и затем делайте запрос Ajax. Сделайте кнопку формы не типа отправки, просто вызовите Ajax из нее onclick.

Или, если вы хотите работать меньше, просто измените действие формы на какое-то незанятое значение "javascript://", так что на событие отправки фактически отправляется только запрос ajax:

<form id="login-form" action="javascript://" method="post">

Ответ 3

Вот мой код, он поможет вам:

  <form name="myform" id="myform">
    <div class="form-group">
      <label for="fullName">Name:</label>
      <input type="text" name="fullName" class="form-control">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" name="email" class="form-control">
    </div>
    <div class="form-group">
      <label for="subject">Subject:</label>
      <input type="text" name="subject" class="form-control">
    </div>
    <div class="form-group">
      <label for="mark">Mark:</label>
      <input type="number" name="mark" class="form-control">
  </form>
  <button type="submit" class="btn btn-success " id="submitform">Submit</button>


  <script>
  $(document).ready(function () {
      $("#submitform").click(function (e) {
          var MyForm = JSON.stringify($("#myform").serializeJSON());
          console.log(MyForm);
          $.ajax(
              {
                  url: "<your url>",
                  type: "POST",
                  data: MyForm,
              });
          e.preventDefault(); //STOP default action
      });
  });
  </script>

Ответ 4

$('#form').on('submit', function(event){

        var obj = $('form').serialize();

        $.ajax({
            type: 'POST',
            url: 'http://192.168.52.166:6000/api/2/users/login/',
            dataType: 'json',
            data: obj,
            contentType : 'application/json',
            success: function(data) {
                alert(data)
            }
        });

       return false;
   });

Ответ 5

Функция Jquery:

var _serializeForm = function (id) {
        var result = {};
        $.each($(id).serializeArray(), function (i, field) {
            result[field.name] = field.value.trim() || null;
        });
        return result;
    }

Укажите в своей форме "Id", а затем используйте вышеуказанный метод для сериализации json

$.ajax({
        type: 'POST',
        url: 'http://192.168.52.166:6000/api/2/users/login/',
        dataType: 'json',
        data: JSON.stringify(_serializeForm('#formId')),
        contentType : 'application/json',
        success: function(data) {
            alert(data)
        }
    });

Ответ 6

Вы не можете использовать HTTP-протокол в сообщении или получить запрос, вы должны поместить путь своего файла в свои каталоги на своем сервере, не делая внешних запросов, попробуйте удалить http://192.168.52.166:6000/ с вашего запроса POST

  $.ajax({
        type: 'POST',
        url: 'api/2/users/login/',
        dataType: 'json', 
        data: JSON.stringify(obj),
        contentType : 'application/json',
        success: function(data) {
            alert(data)
        }
   });

Ответ 7

попробуйте удалить JSON.stringify() из данных. $.ajax({       тип: "POST",       url: 'http://192.168.52.166:6000/api/2/users/login/',       dataType: 'json',       данные: obj,       contentType: 'application/json',       успех: функция (данные) {           Оповещение (данные)       }   });