1

PHP ページ 'myscript.php' の戻り値を表示するために、フォームが AJAX 経由で送信されません。

これは私が使用しているHTMLです：

<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">

<ul>

    <li>
    <label>Destination:</label>
    <select name="city" id="city">
        <option class="level-0" value="atlanta">Atlanta</option>
        <option class="level-0" value="miami">Miami</option>

    </select>
    </li>

</ul>

<input class="srch_btn" type="button" value="{{submit-text}}" />

</form>

ページの前半の JavaScript は次のとおりです。

jQuery(document).ready(function($) {
   $('#city').change(function() {
  $(this).parents("form").submit();
   });
$('#myform').submit(function() { 
  $.post(
     'myscript.php',
     $(this).serialize(),
     function(data){
        $("#mydiv").html(data)
     }
  );
  return false;   
   });
});

myscript.php は次のとおりです。

<?php
   if ($_POST['city'] == "atlanta") {
  echo "Div contents 1";
   }
   if ($_POST['city'] == "miami") {
  echo "Div contents 2";
   }
?>

この時点では、送信ボタンは応答しないか、「myscript.php」ファイルへのアクセスを試みません。助けていただければ幸いです。前もって感謝します！

4

4 に答える 4

0

dqhendricksは正しかった-ajaxに直接アクセスできるのに、なぜフォーム送信を使用するのですか？次の例では、出力を表示するためにフォームの下にdiv（#responder）を追加しました。試してみてください。完全に機能することがわかります。

ドロップダウンが変更された瞬間にデータが送受信されるため、ボタンはそのままにしておきますが、実際にはボタンは必要ありません。フォームの下に含まれているdivにメッセージが表示されます。

改訂されたHTML：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
    <ul>
        <li>
            <label>Destination:</label>
            <select name="city" id="city">
                <option class="level-0" value="atlanta">Atlanta</option>
                <option class="level-0" value="miami">Miami</option>
            </select>
        </li>
    </ul>
    <input class="srch_btn" type="button" value="Go" />
</form>

<div id="responder"></div>

改訂されたJAVASCRIPT/JQUERY：

$(document).ready(function() {

    $('#city').change(function() {
        //var cty = $('#city').val();
        $.ajax({
            type: "POST",
            url: "myscript.php",
            data: "city=" + $(this).val(),
            success:function(data){
                $('#responder').html(data);
            }
        });
    });
});
于 2012-10-30T16:01:24.457 に答える
0

.closest()この場合よりも使用することをお勧めし.parents()ます。親セレクターは、セレクターに一致するすべての祖先を取得します。

$('#city').change(function() {
  $(this).closest("form").submit();
});

そして、e.preventDefault代わりにデフォルトアクションの使用を停止するにはreturn false

$('#myform').submit(function(e) { 

     e.preventDefault();
     // Your code here
});
于 2012-10-30T15:40:37.363 に答える
0

コードの問題の 1 つは、フォームの送信が実際に停止されないことです。return false;あなたが思っているようにjQueryで正確に機能するとは限りません。代わりに、デフォルトのアクションを停止するには、次のようにする必要があります。

$('#myform').submit(function(event) {
   event.preventDefault();

http://api.jquery.com/event.preventDefault/

その上、フォーム送信を行わずに独自の AJAX 送信に置き換えたい場合、なぜこのコードでフォーム送信を呼び出しているのでしょうか? AJAX を変更コードに直接入れてみませんか?

于 2012-10-30T15:32:33.323 に答える
0

input type=buttonHTMLコードでは、次のように変更する必要があると思いますinput type=submit 

<input class="srch_btn" type="submit" value="{{submit-text}}" />

次に、そのボタンをクリックすると、フォームが php ページに送信されます。

また、jQuery コードの select change イベントについては、HTML で name/id 属性を使用できるため、次のセレクターを試すことができると思います。

$('#city').change(function() {
  $('#myform').submit();
});
于 2012-10-30T15:49:14.850 に答える