Прежде всего, я знаю много вопросов с таким же названием. Я видел так много вещей, но пока у меня ничего не работает. Вот почему я открыл этот вопрос.
У меня есть два сценария в основном 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
Это крайне не подходящее решение.. Но если у вас такая же ситуация, как у меня, вы можете использовать это..
В моей ситуации я разработал интерфейс и имел API для выполнения запроса... Но мой сервер не разработал его... Так что источник находится далеко... В производственной среде все мои файлы будут объединены на сервере. Но сейчас, для тестирования, мне нужно было использовать это расширение для работы с моим API.
Вы должны изменить функцию как 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;
});
Не отправляйте форму и затем делайте запрос Ajax. Сделайте кнопку формы не типа отправки, просто вызовите Ajax из нее onclick.
Или, если вы хотите работать меньше, просто измените действие формы на какое-то незанятое значение "javascript://", так что на событие отправки фактически отправляется только запрос ajax:
<form id="login-form" action="javascript://" method="post">
Вот мой код, он поможет вам:
<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>
$('#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;
});
Функция 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)
}
});
Вы не можете использовать 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)
}
});
попробуйте удалить JSON.stringify() из данных. $.ajax({ тип: "POST", url: 'http://192.168.52.166:6000/api/2/users/login/', dataType: 'json', данные: obj, contentType: 'application/json', успех: функция (данные) { Оповещение (данные) } });