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。

有人请帮忙

Answer 1

你必须在$ .ready中包装它，因为当jQuery试图选择它时，元素forecastform不存在。

$(document).ready(function(){
   jQuery('#forecastform').submit(function(event) {
   ....
   ...
   })
}

Answer 2

语法错误，未加引号的字符串！

替换：

var url = <?php echo get_template_directory_uri() . '/local-forecast-process.php';?>;

与

var url  = "<?php echo get_template_directory_uri(); ?>/local-forecast-process.php";

并在元素之后不包含javascript时添加DOM就绪处理程序。

jQuery表单提交和显示结果不起作用

2 个答案: