AJAX 新手：按钮单击 PHP

Question

我和一个朋友试图弄清楚如何创建一个函数，该函数会根据下拉菜单中设置的值从数据库中提取一行。经过大量搜索，我们已经走到了这一步，但点击时什么也没有发生。如果我只加载 php，我只会收到带有“旧方法”的错误消息。任何帮助，将不胜感激。如果这对答案很重要，则只需要对结果进行样式设置。

（添加原始 AJAX 代码）在中间。

谢谢！

    <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>

原始 AJAX 代码（根据我朋友的理解）

$(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

在你的 php 中而不是使用 print_r()

 echo json_encode($result);

然后在你的 jQuery 中

alert(JSON.parse(data));

这有什么帮助

Answer 2

我只是决定将我的下拉菜单包装成一个表格并将其样式恢复为原始形状。 PHP 以这种方式工作就像一个魅力。