$_POST不使用ajax表单提交?

When I try to check user input name is already exist by ajax form submit !But it only get Undefined index: username in sessions.php ,what is missing ?

当我尝试检查ajax表单提交的用户输入名称是否已经存在时，它只会得到会话中未定义的索引:用户名。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

sessions.php

<?php
$exist = "david";
if($_POST['username'] == $exist){
    echo json_encode("Already exist");
}
else{
    echo json_encode("You can succesfully add");
}
?>

11 个解决方案

#1

There are few issues with your code, such as:

您的代码很少有问题，例如:

• ... it only get Undefined index: username in sessions.php

  …它只获得sessions.php中的未定义索引:username

  The problem is because of the following two lines,

  问题在于，

  contentType : false,
  processData: false,
  

  From the documentation,

  的文档,

  contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
  Type: Boolean or String
  When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header.

  contentType(默认:“应用程序/ x-www-form-urlencoded;类型:布尔或字符串发送数据到服务器时，使用此内容类型。默认的是“应用程序/ x-www-form-urlencoded;charset=UTF-8"，在大多数情况下都可以。如果显式地将内容类型传递给$.ajax()，那么它总是被发送到服务器(即使没有发送数据)。从jQuery 1.6开始，您可以传递false告诉jQuery不要设置任何内容类型头。

  and

  和

  processData (default: true)
  Type: Boolean
  By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

  processData(默认:true)类型:Boolean默认情况下，作为对象(技术上，除了字符串之外的任何数据)传入data选项的数据将被处理并转换为查询字符串，与默认内容类型“application/ www-form- urlencoding”匹配。如果要发送DOMDocument或其他未处理的数据，请将此选项设置为false。

  Hence, $_POST array would be empty in sessions.php page if you set contentType and processData to false, and that's why you're getting this undefined index: username error. But having said that, since you're sending a file with your AJAX request, it's okay to set these settings as false, which is further explained in the following point.

  因此，$_POST数组在会话中为空。如果您将contentType和processData设置为false，那么就会得到这个未定义的索引:username错误。但话虽如此，由于您正在发送一个带有AJAX请求的文件，因此可以将这些设置设置设置为false，这将在下面的部分中进一步解释。

• .serialize() method creates a URL encoded text string by serializing form control values, such as <input>, <textarea> and <select>. However, it doesn't include file input field while serializing the form, and hence your remote AJAX handler won't receive the file at all. So if you're uploading file through AJAX, use FormData object. But keep in mind that old browsers don't support FormData object. FormData support starts from the following desktop browsers versions: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.

  .serialize()方法通过序列化表单控件值创建URL编码的文本字符串，如、和。但是，在序列化表单时，它不包含文件输入字段，因此远程AJAX处理程序根本无法接收该文件。如果你是通过AJAX上传文件，使用FormData对象。但是请记住，旧的浏览器不支持FormData对象。FormData支持从以下桌面浏览器版本开始:IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+。

• Since you're expecting a json object from server, add this setting dataType:'json' to your AJAX request. dataType is the type of data you're expecting back from the server.

  由于您期望从服务器获得一个json对象，因此将这个设置数据类型:“json”添加到AJAX请求中。数据类型是您期望从服务器返回的数据类型。

So the solution would be like this:

所以答案是这样的

Keep your HTML form as it is, and change your jQuery/AJAX script in the following way,

保持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);
        }
    });
});

And on sessions.php page, process your form like this:

和会话。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"));
    }

?>

#2

If you set contentType to false, ajax header is not send, in result if you send somehing type:POST header doesn't contain your data, so server can't see it. If you use GET to do it, it will work, because data is sended with GET (after url) not in header.

如果您将contentType设置为false，则不会发送ajax header，因此如果您发送某些类型:POST header不包含您的数据，因此服务器无法看到它。如果您使用GET操作，它将会工作，因为数据是用GET (after url)发送的，而不是在header中。

Just remove contentType

只是删除contentType

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

contentType

contentType

(default: 'application/x-www-form-urlencoded; charset=UTF-8')

(默认:“应用程序/ x-www-form-urlencoded;utf - 8字符集= ')

Type: Boolean or String When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

类型:布尔或字符串发送数据到服务器时，使用此内容类型。默认的是“应用程序/ x-www-form-urlencoded;charset=UTF-8"，在大多数情况下都可以。如果显式地将内容类型传递给$.ajax()，那么它总是被发送到服务器(即使没有发送数据)。在jQuery 1.6中，您可以通过false来告诉jQuery不要设置任何内容类型头。注意:W3C XMLHttpRequest规范规定字符集总是UTF-8;指定另一个字符集不会强制浏览器更改编码。注意:对于跨域请求，将内容类型设置为除application/x-www-form- urlencodes、multipart/form-data或text/plain之外的任何内容，都会触发浏览器向服务器发送飞行前选项请求。

processData is used to send data as it is - Ajax documentation

processData是用来发送数据的- Ajax文档

Sending Data to the Server

向服务器发送数据。

By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.

默认情况下，使用GET HTTP方法发送Ajax请求。如果需要POST方法，可以通过设置type选项的值来指定该方法。此选项影响如何将数据选项的内容发送到服务器。根据W3C XMLHTTPRequest标准，POST数据将始终使用UTF-8字符集传输到服务器。

The data option can contain either a query string of the form key1=value1&key2=value2, or an object of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.

数据选项可以包含表单key1=value1&key2=value2的查询字符串，或表单{key1: 'value1'， key2: 'value2'}的对象。如果使用后一个表单，则在发送数据之前使用jQuery.param()将数据转换为查询字符串。可以通过将processData设置为false来绕过这种处理。如果您希望向服务器发送XML对象，则可能不希望进行这种处理;在本例中，将contentType选项从application/ www-form- urlencodes编码为更合适的MIME类型。

#3

You are setting contentType to false, that is why PHP can not parse your post body

您将contentType设置为false，这就是PHP不能解析post主体的原因

#4

Use $.post() for ajax :

使用$.post()用于ajax:

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

    e.preventDefault();

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

});

#5

Use the following code in your html code and remove contentType : false, processData: false

在html代码中使用以下代码并删除内容类型:false, processData: 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>

#6

Considering this is your HTML form

考虑到这是您的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>

You can call the jQuery function like this

可以像这样调用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;
    	});

You will get all the params in your session.php file like

您将在您的会话中获得所有的参数。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");
  }
?>

I hope this resolves your problem.

我希望这能解决你的问题。

#7

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

#8

You need to change your script:

你需要改变你的剧本:

Try using new FormData instead of .serialize().

尝试使用新的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>

Note : You are used contentType to false that mean jQuery not to add a Content-Type header. You are using jQuery's .serialize() method which creates a text string in standard URL-encoded notation. You need to pass un-encoded data when using "contentType: false".

注意:使用contentType to false表示jQuery不添加内容类型头。您正在使用jQuery的.serialize()方法，该方法以标准url编码的表示法创建文本字符串。使用“contentType: false”时，需要传递未编码的数据。

#9

Change your script to

改变你的脚本

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

#10

Your coding is correct.Remove processData and contentType from Ajax it will work

代码是正确的。从Ajax中删除processData和contentType它将会工作

processData : false,
contentType : false,  

#11

Remove that method,action: post and blank from your form tag as you need to give all details in ajax method only.

从表单标记中删除方法action: post和blank，因为您只需要在ajax方法中提供所有细节。

this will solve hopefully

这将解决希望

    <form id="saveuser" enctype="multipart/form-data">