web-dev-qa-db-ja.com

jQueryとPHPを使用したフォームのシリアル化と送信

JQueryを使用してフォームのデータを送信しようとしています。ただし、データはサーバーに到達しません。私が間違っていることを教えてください。

私のHTMLフォーム：

<form id="contactForm" name="contactForm" method="post">
    <input type="text" name="nume" size="40" placeholder="Nume">
    <input type="text" name="telefon" size="40" placeholder="Telefon">
    <input type="text" name="email" size="40" placeholder="Email">
    <textarea name="comentarii" cols="36" rows="5" placeholder="Message"></textarea> 
    <input id="submitBtn" type="submit" name="submit" value="Trimite">
</form>


JavaScript（上記のフォームと同じファイル内）：

<script type="text/javascript">
    $(document).ready(function(e) {

        $("#contactForm").submit(function() {
            $.post("getcontact.php", $("#contactForm").serialize())
            // Serialization looks good: name=textInNameInput&&telefon=textInPhoneInput etc
            .done(function(data) {
                if (data.trim().length > 0) {
                    $("#sent").text("Error");   
                } else {
                    $("#sent").text("Success");
                }
            });

            return false;
        })
    });
</script>


サーバー側PHP（/ getcontact.php）：

$nume = $_REQUEST["nume"]; // $nume contains no data. Also tried $_POST
$email = $_REQUEST["email"];
$telefon = $_REQUEST["telefon"];
$comentarii = $_REQUEST["comentarii"];


間違っていることを教えてください。

更新

var_dump($_POST)をチェックし、空の配列を返しました。

奇妙なことは、私のローカルマシンでテストした同じコードが正常に動作することです。ホスティングスペースにファイルをアップロードすると、動作しなくなります。 jQueryを使用せずに昔ながらのフォームを実行しようとしましたが、すべてのデータは正しいものでした。

これがどのようにサーバー構成の問題になるかわかりません。何か案は？

ありがとうございました！

phpjqueryformsserializationform-submit
42
Dan Dinu

この機能を使用できます

var datastring = $("#contactForm").serialize();
$.ajax({
    type: "POST",
    url: "your url.php",
    data: datastring,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handling here');
    }
});

戻り型はjsonです

編集： event.preventDefault を使用して、このようなシナリオでブラウザーが送信されないようにします。

回答にデータを追加します。

クロスドメインコールの場合はdataType: "jsonp"。

beforeSend: //これは事前要求コールバック関数です

complete: //リクエストが終了した後に呼び出される関数です。成功またはエラーに関係なく実行する必要があるコードはここに行くことができます

async: //デフォルトでは、すべてのリクエストは非同期に送信されます

cache: //デフォルトではtrue。 falseに設定されている場合、要求されたページがブラウザによってキャッシュされないようにします。

公式ページを見つける こちら

91
zamil

フォームデータで追加のデータを追加できます

serializeArrayを使用して、追加データを追加します。

var data = $('#myForm').serializeArray();
    data.Push({name: 'tienn2t', value: 'love'});
    $.ajax({
      type: "POST",
      url: "your url.php",
      data: data,
      dataType: "json",
      success: function(data) {
          //var obj = jQuery.parseJSON(data); if the dataType is not     specified as json uncomment this
        // do what ever you want with the server response
     },
    error: function() {
        alert('error handing here');
    }
});
29
MrBii

フォーム送信による登録を完了すると、ajaxによって「Shouttoday」に自動的に登録される2つのエンド登録またはユーザー。

var deffered = $.ajax({
     url:"code.shouttoday.com/ajax_registration",
     type:"POST",
     data: $('form').serialize()
    }); 

        $(function(){ 
            var form;
            $('form').submit( function(event) {
                var formId = $(this).attr("id");
                    form = this;
                event.preventDefault();
                deffered.done(function(response){
                    alert($('form').serializeArray());alert(response);
                    alert("success");
                    alert('Submitting');
                    form.submit();
                })
                .error(function(){
                    alert(JSON.stringify($('form').serializeArray()).toString());
                    alert("error");
                    form.submit();
                });
            });
         });
0
Zigri2612

この以前の投稿の回答をご覧ください。 .post（）または.get（）を使用して、シリアル化されたデータをサーバーに送信することができます。

jQueryを使用してフォームデータをJavaScriptオブジェクトに変換する

とにかく、それはこの詳細の欠如によって引き起こされるあなたの状況を非常に混乱させます。

Webサーバー（非ローカル）を使用している場合、実際のjqueryリンクのセットアップを忘れると、このコードが間違っている可能性があります。 jqueryを絶対パスまたは相対パスで参照してもわかりません！？

0
Thor Aryliah
<script type="text/javascript">
$(document).ready(
        function() {
            populateUser();
            $("#user").submit(
                    function(e) {
                        e.preventDefault();
                        jQuery.ajaxSetup({
                            async : false
                        });
                        if ($("#roleId").val() != 'Select role') {
                            $.post($(this).attr("action"), $(this)
                                    .serialize(), function(response) {
                                alert(response.message);
                                $("#user")[0].reset();
                                populateUser();
                                jQuery.ajaxSetup({
                                    async : true
                                });
                            });
                        } else {
                            alert("Please Select the role of user");
                        }
                    })
        });
0
Aniket
 $("#contactForm").submit(function() {

    $.post(url, $.param($(this).serializeArray()), function(data) {

    });
 });
0
rahulbhondave

問題はPHP構成である可能性があります。

Php.iniファイルの設定max_input_varsを確認してください。

例として、この設定の値を5000に増やしてみてください。

max_input_vars = 5000

次に、Webサーバーを再起動して試してください。

0
dxb_dev

フォームからのデータが適切にシリアル化されているかどうかをコンソールで確認しましたか？ Ajaxリクエストは成功しましたか？また、プレースホルダーの引用符を閉じなかったため、いくつかの問題が発生する可能性があります。

 <textarea name="comentarii" cols="36" rows="5" placeholder="Message>
0
Jan.J

POSTまたはGETの場合、firebugを調べましたか？.

コンソールの表示を確認してください。

テストスクリプトを入力します。

console.log(data);

サーバーからの応答が表示される場合は、サーバーからの応答を確認できます。

0
A. M. Mérida