Ajax调用（之前/成功）在php文件中不起作用

Question

I have a form that when clicked the submit button makes a call via ajax . This ajax is inside a php file because I need to fill in some variables with data from the database. But I can not use the calls before / success. They just do not work, I've done tests trying to return some data , using alert , console.log and nothing happens. Interestingly, if the ajax is isolated within a file js they work. Some can help me please?

File:

<?php

$var = 'abc';

?>

<script type="text/javascript">
    $(document).ready(function() {

        $('#buy-button').click(function (e){

            var abc = '<?php echo $var; ?>';

            $.ajax({  
                type: 'POST',
                data: $('#buy-form').serialize(),
                url: './ajax/buy_form.php',
                dataType: 'json',
                before: function(data){
                    console.log('ok');
                },
                success: function(data){

                },
            });
        });

    });
</script>

HTML:

<form id="buy-form">
  <div class="regular large gray">
      <div class="content buy-form">
          /* some code here */
          <div class="item div-button">
            <button id="buy-button" class="button anim" type="submit">Comprar</button>
          </div>
      </div>
  </div>
</form>

---- EDIT ----

Problem solved! The error was in the before ajax. The correct term is beforeSend and not before . Thank you all for help.

Answer 1

You said it was a submit button and you do not cancel the default action so it will submit the form back. You need to stop that from happening.

$('#buy-button').click(function (e){
    e.preventDefault();
    /* rest of code */

Now to figure out why it is not calling success

        $.ajax({  
            type: 'POST',
            data: $('#buy-form').serialize(),
            url: './ajax/buy_form.php',
            dataType: 'json',
            before: function(data){
                console.log('ok');
            },
            success: function(data){

            },
            error : function() { console.log(arguments); }  /* debug why */
        });
    });

My guess is what you are returning from the server is not valid JSON and it is throwing a parse error.

Answer 2

Try this

<script type="text/javascript">
$(document).ready(function() {

    $('#buy-button').click(function (e){
        e.preventDefault();
        var abc = '<?php echo $var; ?>';

        $.ajax({  
            type: 'POST',
            data: $('#buy-form').serialize(),
            url: './ajax/buy_form.php',
            dataType: 'json',
            beforeSend: function(data){
                console.log('ok');
            },
            success:function(data){

            }
        });
    });

});

And make sure that your php file return response