0

多くの投稿で頻繁に返される質問であることは知っていますが、何十もの回答を読んだ後でも、コードの何が問題なのかわかりません。

ポイントは、デフォルトの送信を防止し、応答 div で応答データを取得することです。コードが実際に行うことは、geocoder.php ページに直接送信することです。

どうもありがとう、

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
/* attach a submit handler to the form */
$("geostring").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find( 'input[name="geo"]' ).val(),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { s: term } );

  /* Put the results in a div */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#answer" ).empty().append( content );
  });
});
</script>



<form action="http://winefy.alwaysdata.net/geocoder.php" method="POST" id="geostring">
<input type=text name="geo" placeholder="Address..." />
<input type="submit" value="Geocode" />
<div id="answer"></div>
</form>
4

2 に答える 2

3

2つのこと：

  1. 以下のコメントでDCoderが指摘しているように、セレクターに#. $("#geostring")ではないはず$("geostring")です。

  2. form要素が存在する前にハンドラーをアタッチしようとしています。その$("#geostring")ため、空の jQuery セットが返され、ハンドラーはフックされません。

    の後にscriptタグを付けるだけです。form

    <form action="http://winefy.alwaysdata.net/geocoder.php" method="POST" id="geostring">
<input type=text name="geo" placeholder="Address..." />
<input type="submit" value="Geocode" />
<div id="answer"></div>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
/* attach a submit handler to the form */
$("#geostring").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find( 'input[name="geo"]' ).val(),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { s: term } );

  /* Put the results in a div */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#answer" ).empty().append( content );
  });
});
</script>

    もっと：

    scriptまたは、何らかの理由でタグの場所を制御できない場合は、 jQuery のreadyイベントを使用して、DOM が読み込まれるまでコードを遅らせることができます。

    $(function() {
    // ...your code here...
});

    またはより詳細に:

    $(document).ready(function() {
    // ...your code here...
});
于 2013-06-23T07:32:57.937 に答える