在 WordPress 自定义模板表单中使用 jQuery .post 函数

发布于 2024-11-04 09:04:43 字数 837 浏览 0 评论 0原文

我目前正在 WordPress 网站上创建一个自定义联系表单,我试图通过 ajax 使用 jQuery 提交该表单,但是当我执行 $.post 函数时,firebug 在控制台中报告 404 错误,即使我可以键入URL 到我的地址栏并正确显示页面。我不会跨域发帖。

这是我的代码示例,删除了不相关的代码:

<form action="" method="post" onsubmit="return submitContactForm()" class="contactform">
 <!-- inputs etc here -->
</form>

<script type="text/javascript">
function submitContactForm() {
  // Omitted error checking here, return false on error
  $.post('/contact'/, $('.contactform').serialize(), function(data) {
    alert(data);
    return false;
  });
  return true;
}
</script>

帖子永远不会成功,表单每次都会以“正常”方式提交。

我在 $.post 的 url 部分尝试了多种组合,包括 /contact/ 、 /contact 、 contact 、 /contact/ ,甚至网站的完整 url 都没有成功。以前有人遇到过这个问题吗?或者我做错了什么?我唯一的猜测是与我的 /%postname%/ 永久链接结构有关,除此之外我一无所知!

任何想法/想法表示赞赏

谢谢,安迪

I'm currently whipping up a custom contact form on a wordpress site which I'm trying to submit via ajax with jQuery, however when I perform the $.post function, firebug is reporting a 404 error in the console even though I can type the URL in to my address bar and display the page correctly. I am not posting cross-domain.

Here is an example of my code, with irrelevant code removed:

<form action="" method="post" onsubmit="return submitContactForm()" class="contactform">
 <!-- inputs etc here -->
</form>

<script type="text/javascript">
function submitContactForm() {
  // Omitted error checking here, return false on error
  $.post('/contact'/, $('.contactform').serialize(), function(data) {
    alert(data);
    return false;
  });
  return true;
}
</script>

The post is never successful and the form submits the "normal" way every time.

I've tried many combinations in the url part of $.post including /contact/ , /contact , contact , /contact/, even the full url of the site with no luck. Has anybody had this issue before? Or am I doing something blatantly wrong? My only guess is something to do with my /%postname%/ permalink structure, other than that I'm clueless!

Any ideas/thoughts appreciated

Thanks, Andy

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

很酷又爱笑 2024-11-11 09:04:43

这是 jQuery 文档中的内容:

这是一个简写的 Ajax 函数,
这相当于:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

试试这个:

        $(function()
        {
            $("button#send").click(function() {
                $.ajax({
                    type: "POST",
                    url: "post.php",
                    data: $("#form").serialize(),
                    success: function(msg){
                        $("#msg_ok").html(msg);
                        $("#form").reset();
                        //alert(msg);
                    }
                });
            });
        });

This is in jQuery documentation:

This is a shorthand Ajax function,
which is equivalent to:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

Try this:

        $(function()
        {
            $("button#send").click(function() {
                $.ajax({
                    type: "POST",
                    url: "post.php",
                    data: $("#form").serialize(),
                    success: function(msg){
                        $("#msg_ok").html(msg);
                        $("#form").reset();
                        //alert(msg);
                    }
                });
            });
        });

傻比既视感 2024-11-11 09:04:43

我终于明白是怎么回事了。基本上 ajax 发布是异步执行的,因此在收到响应之前,脚本继续处理

将 async: false 添加到 $.ajax 调用解决了问题

感谢您的帮助

I finally figured out what's going on. Basically the ajax post was being performed asynchrounously, so before the response had been receieved the script continued processing

Adding async: false to a $.ajax call solved the problem

Thanks for the help

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文