Question

我有一个使用jquery帖子答案的grader.php脚本，它完美无缺。根据结果，它会带来一个表单，以便他们可以发送带有联系信息的消息。当我尝试发布到第二个脚本来处理邮件程序时，整个页面刷新而不发布数据或返回相应的消息。事实证明，根本没有打电话。如果你想看到staging site，欢迎你来看看。对我来说，用jquery弄湿我的脚是一种俗气的方式。但是，我相信可疑剧本就在这里。

我在点击事件中添加了一个提醒，看它是否会触发点击按钮上的点击。没有警报触发器，我得到的只是页面刷新。

或者，是否有任何方式记录帖子和控制台数据以确切了解发生了什么？

HTML：

<div id="result">
    <form id="info" method="post" action="">
    <input name="phone_number" placeholder="phone number" type="text" size="20" value="">
    <input name="email_address" placeholder="email address" type="text" size="30" value="">
    <textarea cols="50" rows="10" placeholder="Questions? Comments?" name="comments"></textarea>
    <input type="submit" id="score" name="score" value="Send">
    </form>';
</div>

Jquery的：

$("#score").click(function(event){
    alert("clicked");
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var info = $("#info").serialize();
    $('#result').fadeOut().html("");
    $.post('paider.php', info, function(data , status){
        $('#result').fadeIn().html(data);
        alert(status);
    });
});

Answer 1

我认为这里有两个问题。

问题1： 由于表单位于#result内部，因此将＃results＆＃39; html设置为＆＃34;＆＃34;在序列化之前有效地清空表单？你试过吗？

$("#score").click(function(event){
    var info = $("#info").serialize();
    $('#result').fadeOut().html("");
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    $.post('paider.php', info, function(data , status){
        $('#result').fadeIn().html(data);
    });
});

问题2： 好的，所以我看了一下你的暂存网站，并认为我发现了这个问题。首先，您可以使用与此主题中的问题类似的表单，然后您将替换＆＃34;替换＆＃34;这个表格带有一个新表格，现在包含一个＆＃34; #scris＆＃34;元素（输入类型=＆＃39;提交＆＃39;）。

您正在对文档加载应用您的jquery事件处理程序，但那时#score元素尚未存在于DOM中，因为您尚未加载它。

你相信你在$（＆＃34; #scris＆＃34;）中运行脚本。点击但实际上页面只是使用没有动作和提交按钮的表单的默认行为。

要解决此问题，您需要在DOM树中的更高级别应用事件处理程序，或者您可以更简单地测试这是否是问题

请在您的第一个#submitbuttonclick处理程序

中尝试此操作

$("#submitButton").click(function(event){
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var formdata = $('form').serialize();
    $.post('grader.php', formdata, function(data , status){
        $('ul').css('display', 'none');
        $('#result').fadeIn().html(data);
        //Here add the handler for #score click
        $("#score").off("click").on("click", function(event){
            //Insert code snippet shared above here
        });
    });
});

这样做的目的是在将#score提交按钮写入DOM后绑定它。如果脚本执行多次，我们不希望处理程序多次触发，这就是我们首先调用＆＃34; off＆＃34 ;.

希望这有帮助。

ajax post不应该刷新页面

1 个答案: