1

私はまだJQueryが初めてで、ページを更新せずにフォームを送信する方法を学ぼうとしています...フォームが送信されると、「見出し」と「副見出し」に入力した値を渡すことができますphp 変数 (データベースなどにデータをエコー/挿入できます)

だから、私は入れた

"<? echo $_POST['headline']; ?>"

の上

<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>

しかし、フォームに入力して送信ボタンをクリックすると、「変更が保存されました!」としか表示されません。つまり、変数を PHP に渡すことはできません。

HTML と JS は 1 つのファイルに結合されます。同じファイルで処理されるため、URL メソッドは .ajax に残しました。

HTMLフォーム

<div id="submit-form">
<form action="" id="select-block" class="general-form">
<div class="input-wrap">
    <input class="clearme" name="Headline" value="Your headline here" id="headline"/>
</div>
<div class="input-wrap">
    <textarea class="clearme" name="Sub-Headline" id="subheadline">Sub Headline Here</textarea>
</div>

<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>
</form>
</div>

そしてJQUERYコード

<script type="text/javascript">

$(function() {  
  $(".save-notice").hide();
  $(".submit-btn").click(function() {  

    var headline = $("input#headline").val();
    var subheadline = $("textarea#subheadline").val();
    var dataString = 'headline='+ headline + '&subheadline=' + subheadline;
    alert(dataString)


        $(".save-notice").hide();
        $.ajax({  
        type: "POST",  
        url: "",
        data: dataString,
        success: function() {  
            $(".save-notice").show();
        }  
    });  
return false;  
  });  
});  

</script>

そのようにできるかどうか、インターネット上のいくつかの例/チュートリアルで見ました。アドバイスできますか？

4

4 に答える 4

2

http://api.jquery.com/serialize/を参照して ください

クリック ハンドラにコードを追加する代わりに

$(".submit-btn").click(function() { ...  }

送信ハンドラーを使用する

$("#select-block").submit(function() {  
// your code
  var dataString = $(this).serialize();

});
于 2012-10-30T18:05:04.550 に答える
0

Firebug のコンソール機能を使用すると、AJAX 呼び出しに対するサーバーの応答を確認できます。応答は $_POST var を希望どおりに評価していますが、AJAX 呼び出しは舞台裏で行われるため、表示されません。

あまり変更せずにスクリプトを機能させるには、これを試してください (PHP は必要ありません)。

  1. <? echo $_POST['headline']; ?>と置き換えます<span id="yourheadline"><span>
  2. $('#yourheadline').html(headline);前の行に挿入$(".save-notice").show();

私が提案するもう1つのことは、入力ごとに入力するのではなく、フォームをシリアル化してdataString varを作成することです。入力の名前がheadlineandsubheadlineの代わりにHeadlineandの場合Sub-Headline... 

var dataString = $("#select-block").serialize();

...次と同じことを達成します：

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var dataString = 'headline='+ headline + '&subheadline=' + subheadline;
于 2012-10-30T18:42:16.340 に答える
0

javascript 変数にはすでに値があります。

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();

次のようなことができます。

$.ajax({
    type: "POST",
    url: "foo.php",
    data: {headline: headline, subheadline: subheadline},
        success: function() {
            $(".save-notice").show();
        }
});

またはこのように：

$.post("foo.php", { headline: headline, subheadline: subheadline }, 
    function(data) {
        $(".save-notice").show();
    }
);

データがキーと値のペアで渡されることがわかります。 { headline: headline, subheadline: subheadline }

$_POSTlike$_POST['headline']とを使用してアクセスできます$_POST['subheadline']

于 2012-10-30T18:13:41.883 に答える
0

は、ページが読み込まれたときに生成されました$_POST['headline']。save-noticePHP が実行され、HTML ファイルが出力されました。

AJAX 要求を行うと、AJAX 呼び出しに返されるページには新しい値が含まれますが、現在のページには含まれません。

別のページに投稿し、そのページに値を返してから、JavaScript を使用して div の値を変更することができます。

または、返された HTML ページからデータを抽出することもできます。

$(".save-notice").hide();
$.ajax({
    type: "POST",
    url: "",
    data: dataString,
    dataType: 'html', // the page returned
    success: function(data) {
        // get the data from the returned page
        $(".save-notice").html($('.save-notice', data).html());
        $(".save-notice").show();
    }
});
于 2012-10-30T17:59:30.930 に答える