AJAX的新功能：单击PHP

Question

A friend and I were trying to figure out how to create a function that would pull a row(s) from a database based on a value set in a drop down menu. After lots of searching, we got this far, but nothing is happening on click. If I load the php only, I just get the error message with the "old method". Any help would be appreciated. The results will only need to be styled, if that matters in an answer.

(Original AJAX code added) in middle.

THANK YOU!

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type ="text/javascript">

    //      <!-- Change fields to be sourced by field list in future -->
            let FIELD_LIST = [
                            "Any Field",
                            "Animation",
                            "Audio",
                            "Culinary",
                            "Fashion",
                            "Gaming",
                            "Industrial Design",
                            "Interior Design",
                            "Photo",
                            "Video",
                            "Web Design"
                        ];

            let INTEREST_MAP = {
                "Any Field": ["Any Interest"],
                "Animation": ["Modeling", "Motion", "Lighting", "Backgrounds", "Learning Animation"],
                "Audio": ["ADR", "Audio Post", "Composer", "Electrician", "Foley", "Mixer", "On-Set", "Sound Design", "Studio", "Learning Audio"],
                "Culinary": ["Baker", "Catering", "Cuisine (specify)", "Management", "Learning Culinary"],
                "Fashion": ["Costume", "Design", "Marketing", "Tailor", "Wardrobe", "Learning Fashion"],
                "Gaming": ["3D Artist", "Animator", "Art Director", "Concept Artist", "Environment Artist", "Game Tester", "Modeler", "Motion Capture", "Project Manager", "Programmer", "UI Artist", "Learning Gaming"],
                "Industrial Design": ["Product", "Learning Industrial Design"],
                "Interior Design": ["Commercial", "Drafting", "Environment", "Hospitality", "Institution", "Residential", "Learning Interior"],
                "Photo": ["Commercial", "Event", "Fashion", "Narrative", "Nature", "Real Estate", "Sports", "Wedding", "Learning Photo"],
                "Video": ["Cinematographer", "Director", "Editor", "Producer", "Production Assistant", "Scriptwriter", "Learning Video"],
                "Web Design": ["Developing", "Interface", "Typography", "User Experience", "Learning Web Design"]
            };      

            function populate2(fieldId, interestId) {
                let field = document.getElementById(fieldId).value;
                let interestList = document.getElementById(interestId);
                interestList.innerHTML = "";
                for(let interest in INTEREST_MAP[field]){
                    let newOption = document.createElement("option");
                    newOption.value = INTEREST_MAP[field][interest];
                    newOption.innerHTML = INTEREST_MAP[field][interest];
                    interestList.options.add(newOption);
                }
            }
    //      $(document).ready(function(){
    //     $("#collaborate").click(function(){
    //         $.get("Profiles.php", function(data){
    //             alert("Data: " + data);
    //         });
    //     });
    // });
            $(document).ready(function(){
                $('#collaborate').click(function() {
                    event.preventDefault();
                    $.get('userprofiles.php', {ajax: true},function(data, status){
                        alert(data);
                    });
                });
            });

    </script>
<div id="container">

  <div class="column">
      <select class="field" name="field"  id="field" onchange="populate2('field','interestId')" >
            <option value="Any Field">Any Field</option>
            <option value="Animation">Animation</option>
            <option value="Audio">Audio</option>
            <option value="Culinary">Culinary</option>
            <option value="Fashion">Fashion</option>
            <option value="Gaming">Gaming</option>
            <option value="Industrial Design">Industrial Design</option>
            <option value="Interior Design">Interior Design</option>
            <option value="Photo">Photo</option>
            <option value="Video">Video</option>
            <option value="Web Design">Web Design</option>
      </select>
      <h1 class="info1">1</h1>
      <h3 class="info1">Select an artist's field of choice you need</h3>
  </div>
  <div class="column">
      <select class= "interestId" name="interestId" id="interestId">
        <option value="Any Interest">Any Interest</option>
      </select>
          <h1 class="info2">2</h1>
              <h3 class="info2">Select a specific interest you're looking for</h3>
  </div>

  <div class="column">
    <button class="button" id="collaborate" name="collaborate">
        Collaborate!
    </button>
  </div>

  </div>

</div>

ORIGINAL AJAX CODE (from my friend's understanding)

$(document).ready(function(){
            $('#collaborate').click(function() {
                $.ajax({
                    type: "GET",
                    url: "userprofiles.php",
                    data: { 'interest' : "asd" } // this line does nothing at the moment. But ideally it is used to pass data directly as variables to your php document.
                }).done(function( result ) {
                    // alert( "Data Saved: " + result );
                    $('#data').text(data);
                });
            });
        });

PHP

 $Interest = $_GET['interestId'];

    $sql = "SELECT * from User WHERE Interest1='$Interest' OR Interest2='$Interest' OR Interest3 ='$Interest'";

   $result = mysqli_query($sql);

    //  $row = mysql_fetch_row($result);

    //  echo "<pre>";
    //  print_r($row);
    //  echo "</pre>";

    // attempt select query execution

// OLD METHOD BELOW
    if ($result) {
        print_r($result);
        mysqli_free_result($result);
    } else {
        echo "ERROR: Could not execute $sql. " . mysqli_error($link);
    }

Answer 1

In your php instead of using print_r()

 echo json_encode($result);

Then in your jQuery

alert(JSON.parse(data));

how this helps