jquery - jQueryフォームの送信と結果の表示が機能しない

Question

AJAX を使用してフォーム データを投稿し、その結果を div に表示しようとしています。最善を尽くしたにもかかわらず、私は失敗しました。

jQuery 1.8.3で使用しているコードは次のとおりです

HTML:

<form action="" method="post" id="forecastform">
    <input type="text" name="weatherloc" class="weatherloc">
    <input type="submit" name="weathersubmit" class="weathersubmit" value="Get Forecast">
</form>

<div class="wfposts"></div>

ヘッダー セクションの JavaScript:

        <script type="text/javascript">
            jQuery('#forecastform').submit(function(event) {
            event.preventDefault();
            var term = jQuery('.weatherloc').val();
            var url = <?php echo get_template_directory_uri() . '/local-forecast-process.php';?>;

                 var posting = jQuery.post( url, { weatherloc: term } );

                    posting.done(function( data ) {
                    var content = jQuery( data );
                    jQuery( ".wfposts" ).empty().append( content );
                    });
            });
        </script>

まずevent.preventDefault();
、ページの読み込み後に div が入力されていないため、データが送信されているかどうかはわかりませんを無視して、ページがリロードされます。

誰か助けてください