jquery ajax request firebug error_问答_开发者_运维开发者技术经验分享

I am using php/ajax to submit a form without page refresh. Here are my files-

coupon.js

jQuery(document).ready(function(){
        jQuery(".appnitro").submit( function(e) {
$.ajax({
            url     : "http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/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);
    ?>

and here is code for my html page -

<form id="smsform" class="appnitro" action="http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php" method="post">
...
</form>
<div id="mess" style="background:green;"></div>

Now when i click on submit button nothing happens and firebug shows following under console panel -

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

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

Response

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

When i set 'extensions.firebug.allowDoublePost' to true then following results show up -

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

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

Response - 

{"mess":"Message successfully delivered"}

CaN anyone help me in fixing this firebug error of 404 not found. And why is it showing jquery.min.js (line 130) along side?

P.S -do not worry about http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street this is my base url

You may want to try putting the e.preventDefault() statement before the $.ajax call.

EDIT:

My x.html, corresponds to your HTML page


<!DOCTYPE html>
<html>
<head>
<title>x</title>
<script 
  type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="/so/x.js"></script>
</head>
<body>
<form id="smsform" class="appnitro" action="/so/x.php">
<input type="text" name="zz">
<input type="submit">
</form>
<div id="mess" style="background:green;"></div>
</body>
</html>

My x.js, corresponds to your coupon.js


jQuery(document).ready(function(){
  jQuery(".appnitro").submit( function(e) {
    e.preventDefault();
    $.ajax({
      url     : "/so/x.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();
  });
});

My x.php, corresponds to your sms.php


<?php
$res = "Message successfully delivered.";
$arr = array('mess'=>$res);
echo json_encode($arr);
unset($_POST);
?>

This actually works in my environment, although I do not have the rest of the HTML markup or the additional PHP form processing code. The "Message successfully delivered." shows up in green directly below the input field.

When inside the Ajax call this refers to the Ajax object you need to do this