如何使用AJAX刷新PHP文件

Question

Okay, so I searched the web as much as I could and I couldn't find the solution on my problem. I also typed the question and searched for an answer as I saw similar questions to mine. Didn't help. I tried numerous solutions.

Well I have an index page that loads includes/data.php which loads the data from database and echo the .js format that is then loaded by function and display data on the page, so I have at the end of my index.php something like this:

<script type="text/javascript" src="includes/data.php"></script>

On the same index page I have a form that inserts data to database. If you refresh the page I will see refreshed includes/data.php along with new data I just inputted.

I am trying to implement AJAX so that when I click on the button I insert the data to database (already achieved this) and to refresh content of includes/data.php and index.php so it shows data right away without refreshing the index.php. This is my AJAX code:

$('#addtocal').submit( function() {

    $.ajax({
        url     : $(this).attr('action'),
        type    : $(this).attr('method'),
        data    : $(this).serialize(),
        success : function( data ) {    
                   // This is the part where I am stuck.
                  },
        error   : function(){
                     $(".error").fadeIn(2000);
                     $(".error").fadeOut(2000);
                  }
    });

    return false;
});

Just to mention that #calendar is where main jquery function is loading the html content based on the info from /includes/data.php. Thank you in advance for any help you can provide and let me know if you need any other information from me in order to better assist me.

P.S. I saw many suggested using .load() to load content from includes/data.php but that is not working in my case as the content from includes/data.php needs to serve other jquery function that creates html on the fly and and place it in #calendar

Answer 1

I got it to work. What I did I inser aditional $.ajax inside the $.ajax and on completion and I called again again the jquery that uses /includes/data.php

so the code would be something like this:

$('#addtocal').submit( function() {

$.ajax({
    url     : $(this).attr('action'),
    type    : $(this).attr('method'),
    data    : $(this).serialize(),
    success : function( data ) {    
               $.ajax({
                        url: "../includes/data.php",
                        dataType: "script",
                        cache: true
                        }).done(function() {
                          // Here I called other jquery function that uses ../includes/data.php
                        });
              },
    error   : function(){
                 $(".error").fadeIn(2000);
                 $(".error").fadeOut(2000);
              }
});

return false;
});

Thanks for your help anyway @Half Crazed gave me a clue so I get the $.getScript function and saw the way to call .js again so I tried and it worked.