web-dev-qa-db-ja.com

$ _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");
}
?>
javascriptphpjsonajax
13
David Jaw Hpan

コードには、次のような問題がいくつかあります。

  • ...未定義のインデックスのみを取得します：sessions.phpのユーザー名

    問題は、次の2行が原因です。

    _contentType : false,
processData: false,
_

    から ドキュメント 、

    contentType（デフォルト：_'application/x-www-form-urlencoded; charset=UTF-8'_）
    タイプ：BooleanまたはString
    サーバーにデータを送信するときは、このコンテンツタイプを使用してください。デフォルトは「application/x-www-form-urlencoded; charset = UTF-8」で、ほとんどの場合問題ありません。 content-typeを明示的に$.ajax()に渡すと、（データが送信されない場合でも）常にサーバーに送信されます。 jQuery 1.6以降、falseを渡して、コンテンツタイプヘッダーを設定しないようにjQueryに指示できます。

    そして

    processData（デフォルト：true）
    タイプ：Boolean
    デフォルトでは、オブジェクトとしてデータオプションに渡されたデータ（技術的には文字列以外のもの）が処理され、デフォルトに適合するクエリ文字列に変換されます content-type "application/x-www-form-urlencoded"。 DOMDocumentまたはその他の未処理のデータを送信する場合は、このオプションをfalseに設定します。

    したがって、contentTypeとprocessDataを設定すると、sessions.phpページの_$_POST_配列は空になります。 falseに移動すると、このundefined index：usernameエラーが発生します。ただし、AJAXリクエストを使用してファイルを送信するため、これらの設定をfalseとして設定しても問題ありません。これについては、次のポイントで詳しく説明します。

  • .serialize() メソッドは、_<input>_、_<textarea>_、_<select>_などのフォーム制御値をシリアル化することによってURLエンコードされたテキスト文字列を作成します。ただし、フォームのシリアル化中にファイル入力フィールドが含まれないため、リモート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
Rajdeep Paul

contentTypeをfalseに設定すると、ajaxヘッダーは送信されません。何かを送信した場合の結果type:POSTヘッダーにはデータが含まれていないため、サーバーはデータを認識できません。 GETを使用してこれを行うと、データはヘッダーではなくGET（urlの後）で送信されるため、機能します。

contentTypeを削除するだけです

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

contentType

（デフォルト： 'application/x-www-form-urlencoded; charset = UTF-8'）

タイプ：ブール値または文字列サーバーにデータを送信するときは、このコンテンツタイプを使用します。デフォルトは「application/x-www-form-urlencoded; charset = UTF-8」で、ほとんどの場合問題ありません。 content-typeを$ .ajax（）に明示的に渡すと、（データが送信されない場合でも）常にサーバーに送信されます。 jQuery 1.6以降、falseを渡して、コンテンツタイプヘッダーを設定しないようにjQueryに指示できます。注：W3C XMLHttpRequest仕様では、文字セットは常にUTF-8であると規定されています。別の文字セットを指定しても、ブラウザにエンコーディングの変更を強制することはありません。注：クロスドメインリクエストの場合、コンテンツタイプをapplication/x-www-form-urlencoded、multipart/form-data、またはtext/plain以外に設定すると、ブラウザがトリガーされてプリフライトOPTIONSリクエストがサーバーに送信されます。

processDataは、データをそのまま送信するために使用されます- Ajaxドキュメント

サーバーへのデータの送信

デフォルトでは、AjaxリクエストはGETHTTPメソッドを使用して送信されます。 POSTメソッドが必要な場合は、typeオプションの値を設定することでメソッドを指定できます。このオプションは、データオプションのコンテンツがサーバーに送信される方法に影響します。POSTデータは、W3C XMLHTTPRequest標準に従って、常にUTF-8文字セットを使用してサーバーに送信されます。

データオプションには、key1 = value1＆key2 = value2の形式のクエリ文字列、または{key1： 'value1'、key2： 'value2'}の形式のオブジェクトを含めることができます。後者の形式を使用する場合、データは送信される前にjQuery.param（）を使用してクエリ文字列に変換されます。この処理は、processDataをfalseに設定することで回避できます。 XMLオブジェクトをサーバーに送信する場合、この処理は望ましくない場合があります。この場合、contentTypeオプションをapplication/x-www-form-urlencodedからより適切なMIMEタイプに変更します。

12
Griva

ContentTypeをfalseに設定しているため、PHPは投稿の本文を解析できません

4
firegate666

これがあなたの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
Ashish Nayyar

Ajaxには$ .post（）を使用します：

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

    e.preventDefault();

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

});
3
Dhara Parmar

HTMLコードで次のコードを使用して、削除しますcontentType：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>
3
Amir Mohsen
<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
Byeon0gam

スクリプトを変更する必要があります。

.serialize()の代わりにnew FormDataを使用してみてください。

<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がContent-Typeヘッダーを追加しないことを意味します。標準のURLエンコード表記でテキスト文字列を作成するjQueryの.serialize（）メソッドを使用しています。 「contentType：false」を使用する場合は、エンコードされていないデータを渡す必要があります。

1
hardik solanki

スクリプトをに変更します

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

コーディングは正しいです。AjaxからprocessDataとcontentTypeを削除すると機能します

processData : false,
contentType : false,
0
Mani