在wordpress主题中使用jQuery Ajax回调

时间:2012-12-09 08:06:36

标签: ajax wordpress jquery

我正在为WP开发自定义主题,我遇到了ajax回调问题... 这是我的标题:

<script>    
//alert("Data Loaded");
    $('#domaincheck').submit(function(){
        alert("Button pressed");
        $.post('<?php bloginfo('template_directory'); ?>/check.php', $(this).serialize(), function(data){
        alert("Data Loaded: " + data);
        });             
        return false;
    });
</script>

在我的主题文件中,我有简单的形式,如:

<form id="domaincheck">
Name: <input type="text" name="urname">
Birthplace: <input type="text" name="urbirth">
<input type="submit" name="submit" value="Submit">
</form>

现在,当我点击提交按钮 - 页面只是重新加载:(当我把它移出WordPress时,一切正常。有没有办法使这个在WordPress中工作?另外一个奇怪的事情是当我将JS代码包装在“文档就绪” - javascript根本不工作....没有documentready它会显示Alert - 但不会显示回调 - 它只是重新加载页面......再一次 - 在wordpress模板之外它的工作方式应该如此。

谢谢,彼得

1 个答案:

答案 0 :(得分:1)

我已经完成了我的Localhost,这是非常好的ajax调用:

added one main jquery plugin

header.php文件中

<head>引用

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript'>
   $(function(){
       $('#domaincheck').submit(function(e){
           e.preventDefault();
           alert("Button pressed");
           $.post('<?php bloginfo('template_directory'); ?>/check.php',$(this).serialize(), function(data){
               alert("Data Loaded: " + data);
           });
       });
   });
</script>

这个是check.php文件php代码:

<?php
    if((isset($_POST['urname'])) && (isset($_POST['urbirth']))){
        echo $_POST['urname'];
        echo $_POST['urbirth'];
    }
?>

我得到了发布数据的警报。

试一试,看看这是否有帮助。