使用ajax访问另一个文件

Question

4 weeks ago I wrote a php script which adds products to a cart. As I am new to javascript, I decided to make it better by page loading using ajax.

My work looks like this:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<a href="#" class="cart-box" id="cart-info" title="View Cart">
    <?php
    if(isset($_SESSION["products"])){
        echo count($_SESSION["products"]);
    }else{
        echo 0;
    }
    ?>
</a>

<form class="form-item">
    <div class="cart">
        <input type="submit" value="Add to Cart" class="button" />
    </div>
</form>


<script>
    $(document).ready(function(){

        $(".form-item").submit(function(e){
            var form_data = $(this).serialize();
            $("input[type=submit]").val('Adding...'); //Loading button text

            $.ajax({ //make ajax request to cart_process.php
                url: "test2.php",
                type: "POST",
                dataType:"json", //expect json value from server
                data: form_data
            }).done(function(data){ //on Ajax success
                $("#cart-info").html(data.items); //total items in cart-info element
                $("input[type=submit]").val('Add to Cart'); //reset button text to original text
                alert("Item added to Cart!"); //alert user
            })
            e.preventDefault();
        });
    });
</script>

It seems like the code stops working when I start making the ajax request to test2.php because I can't access the file test2.php and I do not really know where the error is coming from.

Thanks for helping

</div>

Answer 1

Yeah, debugging AJAX can be a bother . . . unless you find a way to "see" what's going on over there.

Two ideas:

(1) In PHP file, create a new file, write log entries to the file, close file when done. You can run the routine and check the file you created.

$fq=fopen('_myeyes.log','a');
fwrite($fq, '***** Created by uploader.php *****' . "
" ); 
fwrite($fq, '$fname: ' .$fname . "
" ); 
fwrite($fq, '$pathToImages: ' .$pathToImages. "
" ); 
fwrite($fq, '$pathToThumbs: ' .$pathToThumbs. "
" ); 
fwrite($fq, '$thumbWidth: ' .$thumbWidth. "
" ); 
fclose($fq);

It works, but there's a better way.

(2) Install the Firefox extension (there's also one for Chrome, but the ff one is more reliable -- so if you're a Chrome addict like I am then use both:

firePHP

FirePHP for Chrome

Get the FFox one working first, because sometimes the Chrome one is glitchy - which is fine when you know it works, but is intimidating when you're just trying it out. You think your code is problematic, but it's the extension...

---

A Guide To Using FirePHP

Debugging PHP Code With FirePHP

---

Basically, after downloading FirePHP:

(1) Upload these files into a folder called public_html\FirePHPCore (where public_html is your webroot, as is common on most web hosting)

fb.php
fb.php4
FirePHP.class.php
FirePHP.class.php4

(2) At top of PHP file, these lines:

<?php
if (file_exists('../FirePHPCore/fb.php')) {
    require_once('../FirePHPCore/fb.php');
}else{
    if (file_exists('FirePHPCore/fb.php')) {
        require_once('FirePHPCore/fb.php');
    }else{
        $fpLog = fopen('__fph_log.log', 'w');
        fwrite($fpLog, '***** FirePHP did not load - FirePHPCore/fb.php NOT FOUND *****' . "
"); 
    }
}
ob_start();
$console = FirePHP::getInstance(true);
$console->registerErrorHandler();
$console->registerExceptionHandler();

Then, inside any function where you wish to use FirePHP:

function somefunction(){
    global $console;
    //a bunch of PHP goes here
    $console->log('role: '.$fr);
    //a bunch of PHP goes here
}

In Chrome/Firefox DevTools (F12), you will see these messages appear in the Console tab, same as if you issued a console.log("Hello there") in javascript.

You have eyes!