Question

我使用php / ajax提交没有页面刷新的表单。这是我的文件 -

coupon.js

jQuery(document).ready(function(){
        jQuery(".appnitro").submit( function(e) {
$.ajax({
            url     : "sms.php",
            type    : "post",
            dataType: "json",
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }

        });
//return false or
e.preventDefault();

    });

});

sms.php

    <?php
    //process form
$res = "Message successfully delivered";
    $arr = array( 'mess' => $res );
    echo json_encode( $arr );//end sms processing
    unset ($_POST);
    ?>

这是我的html页面的代码 -

<form id="smsform" class="appnitro" action="sms.php" method="post">
...
</form>
<div id="mess" style="background:green;"></div>

现在，而不是通过ajax提交表单而不刷新页面正在发生的事情是该页面被重定向到

baseurl/sms.php并且页面上唯一可见的内容是

{"mess":"Message successfully delivered"}

我的猜测是php脚本没有成功返回到jquery，因此sms.php的最后一部分中的echo正在显示。我应该如何让php脚本成功返回？任何想法如何调试这个。我在coupon.js结束时使用return false但是没有结果。

当我点击提交时，firebug会给出以下结果 -

POST http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php

404 Not Found 1.29s   `jquery.min.js (line 130)`

响应

Firebug needs to POST to the server to get this information for url:
http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php

This second POST can interfere with some sites. If you want to send the POST again, open a new tab in Firefox, use URL 'about:config', set boolean value 'extensions.firebug.allowDoublePost' to true
This value is reset every time you restart Firefox This problem will disappear when https://bugzilla.mozilla.org/show_bug.cgi?id=430155 is shipped

Answer 1

如果您被重定向到sms.php而不是进行ajax调用，则可能意味着您的jQuery代码有问题，可能是事件绑定本身。

我不确定没有测试它，但不应该代码：

$(document).ready(function(){
        $(".appnitro").submit( function(e) {
$.ajax({
...

在Firefox / Firebug或Chrome-IE / Developer Tools中查看javascript控制台。它会在这些行中显示任何错误吗？

Answer 2

@Fanis他是否使用'$'或'jQuery'无关紧要，他们是同义词。

@Ayush 正如Fanis所说，如果你不使用它，你应该试试Firebug。我在我的服务器上检查过这个例子，工作正常，我不知道你身边的问题是什么。

您可以使用onsubmit =“return false”来禁用表单提交：

<form id="..." class="..." ... onsubmit="return false">

同时检查是否启用了javascript，例如执行“alert（'something'）” at $（document）.ready

编辑：

// instead of  
url: "sms.php"
// try
url: "/~kunal17/devbuzzr/wp-content/themes/street/sms.php"
// although I don't really know if it will help

Answer 3

Fanis和Michal Kluczka对于事件绑定的问题可能是正确的，我自己也尝试过你的代码，它对我有用。

将alert('X')作为jQuery(document).ready()和jQuery(".appnitro").submit()函数中的第一个语句，并查看是否同时显示这两个语句（第一个是在文档加载时，第二个是在表单提交时）。

还有一件事：我建议你加一个

header('Content-Type: application/json');

在打印JSON数据之前，

进入sms.php文件以防止跨站点脚本（XSS）攻击。有关详细信息，另请参阅Don’t serve JSON as text/html。

从远程php脚本返回数据

3 个答案: