AJAX发布数据不起作用

This is my jQuery-Ajax code:

<script>
    $('#sbmt').click( function(){
        $.ajax({
        type: 'post',
        data: $("#ajxfrm").serialize(),
        url: "postdata.php",
        cache: false,
        success: function (data)
        {
          alert('updated table');
        }
        });
    });
</script>

HTML CODE:

<form id="ajxfrm" method="post" action=""> 

<label>HIGH :  </label>  <input type="text" name="hi"  id="hi"><br><br>

<label>LOW :  </label><input type="text" name="lo"  id="lo"><br><br>

<label>OPENING STOCK :  </label><input type="text" name="opn" id="opn"><br><br>

<label>CLOSING STOCK :  </label><input type="text" name="cls" id="cls">

<input type="submit" value="Submit" id="sbmt">

</form>

AND PHP CODE ON postdata.php file is :

require_once 'config.php';

$hi  = $_POST['hi'];

$lo = $_POST['lo'];

$opn = $_POST['opn'];

$cls = $_POST['cls'];

echo $hi;

$postdata = "INSERT INTO htmdem ( high,low,open,close ) VALUES('$hi','$lo','$opn','$cls');";

mysql_query($postdata);

When posting via form without ajax the table is getting updated as it should, but while using AJAX its not. Please suggest what's wrong here. Many Thanks

Modify your html to add action to form:

<form id="ajxfrm" method="post" action="postdata.php"> 

Try handling form submit event instead:

$('#ajxfrm').submit(function(event){
        $.ajax({
        type: 'post',
        data: $(this).serialize(),
        url: $(this).attr("action"),
        cache: false,
        success: function (data)
        {
          alert('updated table');
        }
        });
       return false; //to prevent form submission
      //or event.preventDefault();
    });

BTW, using success callback is deprecated and post requests are not cached so we also don't need cache:false

$('#ajxfrm').submit(function(event){
      $.ajax({
            type: 'post',
            data: $(this).serialize(),
            url: $(this).attr("action")
            })
            .done(function (data){
               alert('updated table');
            });
           return false; //to prevent form submission
           //or event.preventDefault();
     });

Assuming you have included the jquery library in your page,

First, run your page with with your firefox/chrome and use their firebug/console to verify that your ajax is actually posting data to your php page.

Second, modify your query execution in your php file, to catch query errors:

mysql_query($postdata) or die(mysql_error());

One of these cases will help you determine your problem

For Firefox: get the Firebug addon from https://getfirebug.com/
After installing it and restarting firefox, press F12. A console will open.
Run your ajax call and check in the console if data are being posted.

change your input type="submit" to input type="button". that should do the trick I guess.

Try this : Dont forget to set the form action to postdata.php

jQuery(function($) {
    $('#ajxfrm').submit( function(e){
        $.ajax({
            type: 'post',
            data: $(this).serialize(),
            url: $(this).attr("action")
        })
                .done(function (data){
                    alert('updated table');
                });
        e.preventDefault();
    });
});