jQuery Ajax not loading page with ACF fields

I’m using the following jQuery code to load contents from a template part into another on click. Without the ACF PHP tags, it works. However, when I add these tags in <?php the_field('field_name'); ?> it throws a 500 (Internal Server Error) error. Does anyone have a solution for this, please?

    var baseUrl = "http://projectname:8888/wp-content/themes/custom-theme"      $  (".cross__functional").click(function (e) {         e.preventDefault();         console.log('cross functional Clicked')         $  ("#keContent").load(baseUrl + "/template-parts/components/filename.php");     });