$POST не работает в форме отправки ajax?


Когда я пытаюсь проверить, что имя ввода пользователя уже существует, с помощью формы отправки ajax!Но он получает только Undefined index: username в sessions.php, чего не хватает?

<form action="" method="POST" id="saveuser" enctype="multipart/form-data">
<input type="text" name="username"><br>
<input type="password" name="pass"><br>
<input type="file" name="fileupload"><br>
<input type="submit" name="submit" value="Confirm" id="confirm">
</form>
<script type="text/javascript">
    $('#confirm').click(function(e){
        e.preventDefault();
      $.ajax({
            type:'POST',
            url :"sessions.php",
            data:$("#saveuser").serialize(),
            contentType : false,
            processData: false,            
            success: function(d){
                console.log(d);//[error] :Undefined index: username 
            }
        });
    });
</script>

Sessions.php

<?php
$exist = "david";
if($_POST['username'] == $exist){
    echo json_encode("Already exist");
}
else{
    echo json_encode("You can succesfully add");
}
?>
Author: David Jaw Hpan, 2016-06-07

11 answers

В вашем коде есть несколько проблем, таких как:

  • ... он получает только неопределенный индекс: имя пользователя в sessions.php

    Проблема заключается в следующих двух строках,

    contentType : false,
    processData: false,
    

    Из документации,

    Тип содержимого (по умолчанию: 'application/x-www-form-urlencoded; charset=UTF-8')
    Тип: Boolean или String
    При отправке данных на сервер используйте этот тип контента. По умолчанию используется "приложение/x-www-форма-urlencoded; кодировка=UTF-8", что подходит для большинства случаев. Если вы явно передаете тип содержимого в $.ajax(), то он всегда отправляется на сервер (даже если данные не отправляются). Начиная с jQuery 1.6 вы можете передать false, чтобы указать jQuery не устанавливать заголовок типа контента.

    И

    Данные процесса (по умолчанию: true)
    Тип: Boolean
    По умолчанию данные, переданные в параметр data в качестве объекта (технически, что угодно, кроме строки), будут обработаны и преобразован в строку запроса, соответствующую типу содержимого по умолчанию "приложение/x-www-форма-url-кодированный". Если вы хотите отправить документ DOMDocument или другие необработанные данные, установите для этого параметра значение false.

    Следовательно, массив $_POST будет пуст в sessions.php страница, если вы установили contentType и processData в false, и именно поэтому вы получаете этот неопределенный индекс: имя пользователя ошибка. Но, сказав это, поскольку вы отправляете файл с вашим запросом AJAX, все в порядке чтобы установить эти параметры как false, что более подробно объясняется в следующем пункте.

  • .serialize() метод создает текстовую строку в кодировке URL-адреса путем сериализации значений элементов управления формой, таких как <input>, <textarea> и <select>. Однако он не включает поле ввода файла при сериализации формы, и, следовательно, ваш удаленный обработчик AJAX вообще не получит файл. Поэтому, если вы загружаете файл через AJAX, используйте объект FormData. Но имейте в виду, что старые браузеры не поддержка объекта FormData. Поддержка FormData начинается со следующих версий настольных браузеров: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.

  • Поскольку вы ожидаете объект json от сервера, добавьте этот параметр dataType:'json' в свой запрос AJAX. dataType - это тип данных, которые вы ожидаете получить с сервера.

Таким образом, решение будет таким:

Сохраните свою HTML форму такой, какая она есть, и измените свой jQuery/AJAX скрипт следующим образом,

$('#confirm').click(function(e){
    e.preventDefault();

    var formData = new FormData($('form')[0]);
    $.ajax({
        type: 'POST',
        url : 'sessions.php',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,            
        success: function(d){
            console.log(d.message);
        }
    });
});

И далее sessions.php страница, обработайте свою форму следующим образом:

<?php

    $exist = "david";
    if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['pass']) && !empty($_POST['pass'])){
        if($_POST['username'] == $exist){
            echo json_encode(array("message" => "Already exist"));
        }else{
            echo json_encode(array("message" => "You can succesfully add"));

            // get username and password
            $username = $_POST['username'];
            $password = $_POST['pass'];

            // process file input
            // Check whether user has uploaded any file or not
            if(is_uploaded_file($_FILES['fileupload']['tmp_name'])){

                // user has uploaded a file

            }else{
                // no file has been uploaded
            }
        }
    }else{
        echo json_encode(array("message" => "Invalid form inputs"));
    }

?>
 8
Author: Rajdeep Paul, 2016-06-09 19:45:20

Если вы установите для ContentType значение false, заголовок ajax не будет отправлен, в результате, если вы отправите какой-либо заголовок type:POST, он не содержит ваших данных, поэтому сервер не сможет его увидеть. Если вы используете для этого GET, это сработает, потому что данные отправляются с GET (после URL), а не в заголовке.

Просто удалите Тип содержимого

    $.ajax({
            type:'POST',
            url :"sessions.php",
            data: $("#saveuser").serialize(),
            success: function(d){
                console.log(d);
            }
    });

Тип содержимого

(по умолчанию: 'приложение/x-www-форма-URL-кодированный; кодировка=UTF-8')

Тип: Логический или Строка При отправке данных на сервер используйте этот тип контента. По умолчанию используется "приложение/x-www-форма-urlencoded; кодировка=UTF-8", что подходит для большинства случаев. Если вы явно передаете тип содержимого в $.ajax(), то он всегда отправляется на сервер (даже если данные не отправляются). Начиная с jQuery 1.6 вы можете передать false, чтобы указать jQuery не устанавливать заголовок типа контента. Примечание: Спецификация W3C XMLHttpRequest требует, чтобы кодировка всегда была UTF-8; указание другой кодировки не заставит браузер для изменения кодировки. Примечание. Для междоменных запросов задайте тип контента, отличный от application/x-www-форма-url-кодированный, составной/данные формы или текст/обычный вызовет браузер для отправки запроса ПАРАМЕТРОВ предполетной подготовки на сервер.

Данные процесса используются для отправки данных как есть - Документация Ajax

Отправка данных на сервер

По умолчанию запросы Ajax отправляются с помощью GET Метод HTTP. Если требуется метод POST, метод можно указать, установив значение для параметра тип. Этот параметр влияет на то, как содержимое параметра "Данные" отправляется на сервер. Почтовые данные всегда будут передаваться на сервер с использованием кодировки UTF-8, в соответствии с W3C Стандарт запроса XMLHttpRequest.

Параметр данных может содержать либо строку запроса вида ключ1=значение1 и ключ2=значение2, либо объект вида {ключ1: 'значение1', ключ2: 'значение2'}. Если последняя форма используется, данные преобразуются в строку запроса с помощью jQuery.param() перед отправкой. Эту обработку можно обойти, установив для параметра ProcessData значение false. Обработка может быть нежелательной, если вы хотите отправить XML-объект на сервер; в этом случае измените параметр ContentType с приложение/x-www-форма-URL-адрес, закодированный в более подходящий тип MIME.

 12
Author: Griva, 2016-06-09 14:37:25

Вы устанавливаете ContentType в значение false, поэтому PHP не может проанализировать тело вашего сообщения

 4
Author: firegate666, 2016-06-07 07:18:13

Используйте $.post() для ajax:

$('#confirm').click(function(e){

    e.preventDefault();

    $.post("sessions.php", $.param($("#saveuser").serializeArray()), function(data) { // use this ajax code
       console.log(data);
    });

});
 3
Author: Dhara Parmar, 2016-06-07 07:14:50

Используйте следующий код в своем html-коде и удалите Тип содержимого: false, данные процесса: false

<form action="" method="POST" id="saveuser" enctype="multipart/form-data">
    <input type="text" name="username"><br>
    <input type="password" name="pass"><br>
    <input type="file" name="fileupload"><br>
    <input type="submit" name="submit" value="Confirm" id="confirm">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript">
    $('#confirm').click(function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url :"sessions.php",
            data: $('#saveuser').serialize(),
            success: function(d){
                console.log(d);//[error] :Undefined index: username
            }
        });
    });
</script>
 3
Author: Amir Mohsen, 2016-06-07 07:20:22

Учитывая, что это ваша HTML-форма

 
    <form method="POST" id="saveuser" enctype="multipart/form-data">
         <input type="text" name="username" id="username"><br>
         <input type="password" name="pass" id="pass"><br>
         <input type="file" name="fileupload"><br>
         <input type="submit" name="submit" value="Confirm" id="confirm">
    </form>

Вы можете вызвать функцию jQuery следующим образом

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
    jQuery("#saveuser").submit(function () {
    
    		//Validate the input here
    
    		jQuery.ajax({
    			type: 'POST',
    			url: 'sessions.php',
    			data: jQuery('#saveuser').serialize(),
    
    			success: function (msg) {
    				msg = jQuery.trim(msg);
    				if (msg == 'Success') {
                       //Do Whatever					
                       //jQuery("#thanks_message").show('slow');
    				}
    			}
    		});
    		return false;
    	});

Вы получите все параметры в своем session.php файл, подобный

<?php

  $username = trim($_POST['username']);
  $pass = trim($_POST['pass']);
  //rest of the params of the form

  $exist = "david";
  if ($username == $exist) {
    echo json_encode("Already exist");
  } else {
    echo json_encode("You can succesfully add");
  }
?>

Я надеюсь, что это решит вашу проблему.

 3
Author: Ashish Nayyar, 2016-06-14 10:49:28
<form method="POST" id="saveuser" enctype="multipart/form-data">
<input type="text" name="username"/><br>
<input type="password" name="pass"/><br>
<input type="file" name="fileupload"/><br>
<input type="button" name="save" id="save" value="save"/>
</form>

<script type="text/javascript">
    $('#save').click(function(e){
      var form = new FormData(document.getElementById('#saveuser'));  

      $.ajax({

            url :"sessions.php",
            type : 'POST',
            dataType : 'text',
            data : form,

            processData : false,
            contentType : false,  
            success: function(d){
                console.log(d);//[error] :Undefined index: username 
            }
        });
    });
</script>
 2
Author: Byeon0gam, 2016-06-16 01:02:30

Вам нужно изменить свой сценарий:

Попробуйте использовать new FormData вместо .serialize().

<script type="text/javascript">
    $('#confirm').click(function(e){
        e.preventDefault();
        var formData = new FormData($("#saveuser")[0]);
      $.ajax({
            type:'POST',
            url :"tt.php",
            data:formData,
            contentType : false,
            processData: false,            
            success: function(d){
                console.log(d);//[error] :Undefined index: username 
            }
        });
    });
</script>

Примечание: Вы привыкли contentType к false, что означает, что jQuery не добавляет заголовок типа содержимого. Вы используете метод jQuery .serialize(), который создает текстовую строку в стандартной нотации с кодировкой URL. Вам необходимо передавать некодированные данные при использовании "ContentType: false".

 1
Author: hardik solanki, 2016-06-07 07:20:59

Измените свой сценарий на

<script type="text/javascript">
$(function(){
    $('#confirm').click(function(e){
        e.preventDefault();
      $.ajax({
            type:'POST',
            url :"sessions.php",
            data:$("#saveuser").serialize(),
            contentType : false,
            processData: false,            
            success: function(d){
                console.log(d);//[error] :Undefined index: username 
            }
        });
    });
});
</script>
 0
Author: progrAmmar, 2016-06-07 07:10:23

Ваше кодирование правильно. Удалите ProcessData и ContentType из Ajax, это будет работать

processData : false,
contentType : false,  
 0
Author: Mani, 2016-06-15 11:29:47

Удалите этот метод , действие: опубликуйте и очистите тег формы , так как вам нужно указать все подробности только в методе ajax.

Или вы можете удалить сам тег формы, так как метод ajax позаботится о вызове post.

Надеюсь, это решит проблему

    <form id="saveuser" enctype="multipart/form-data">
 -5
Author: LaviJ, 2018-06-29 12:03:24