javascript - 如何使用jquery正确加载php文件

Question

所以首先请允许我说我已经查看了之前的问题，但没有一个对我有帮助。我的问题如下，我有一个 html 文件，其中包含一个调用 javascript 函数来加载 php 文件的表单。

表单如下所示:

<form method="GET" id="submission" >
    <div class="form-group">
        <label for="q">Search Term:</label>
        <input type="text" class="form-control" id="q" name="q" placeholder="enter a keyword">
    </div>
    <div class="form-group">
        <label for="location">location</label>
        <input type="text" class="form-control" id="location" name="location" placeholder="lat,long">
    </div>
    <div class="form-group">
        <label for="locationRadius">Location Radius:</label>
        <input type="text" class="form-control" id="locationRadius" name="locationRadius" placeholder="25km">
    </div>
    <div class="form-group">
        <label for="maxResults">Max Results:</label>
        <input type="number" class="form-control" id="maxResults" name="maxResults" placeholder="0 to 50">
    </div>
    <button type="submit" id="submitButton" >Submit</button>
</form>

负责发送的JS函数如下:

function sendData() {
var keyword = document.getElementById("q").value;
var location = $('#location').value;
var locationRadius = $('#locationRadius').value;
var maxResult = $('#maxResults').value;

alert("keyword is: " + locationRadius);

$.get(
    {
        type: 'GET',
        url: '../php/geolocation.php',
        data : {q: keyword, location: location, locationRadius: locationRadius, maxResults: maxResult}
    },
    function (data) {
        //alert("Data loaded " + data);
        document.getElementById("geolocation-results").innerHTML = data;
    }
);

}

$(document).ready(function() {
    $("#submission").submit(function() {
    sendData();
    return false;
    });
});

所以我的问题有两个方面，如何以类似 ajax 的方式调用它，因为上述格式适用于我的旧代码，但由于某种原因拒绝在此代码中正确运行。我应该如何获取 php 数据？ PHP代码如下:

它是 youtube 地理定位示例代码的修改版本。

    <?php

/**
 * This sample lists videos that are associated with a particular keyword and are in the radius of
 *   particular geographic coordinates by:
 *
 * 1. Searching videos with "youtube.search.list" method and setting "type", "q", "location" and
 *   "locationRadius" parameters.
 * 2. Retrieving location details for each video with "youtube.videos.list" method and setting
 *   "id" parameter to comma separated list of video IDs in search result.
 *
 * @author Ibrahim Ulukaya
 */

/**
 * Library Requirements
 *
 * 1. Install composer (https://getcomposer.org)
 * 2. On the command line, change to this directory (api-samples/php)
 * 3. Require the google/apiclient library
 *    $ composer require google/apiclient:~2.0
 */
if (!file_exists(__DIR__ . '/vendor/autoload.php')) {
    throw new \Exception('please run "composer require google/apiclient:~2.0" in "' . __DIR__ .'"');
}

require_once __DIR__ . '/vendor/autoload.php';

$htmlBody = null;
// This code executes if the user enters a search query in the form
// and submits the form. Otherwise, the page displays the form above.
if (isset($_GET['q'])
    && isset($_GET['maxResults'])
    && isset($_GET['locationRadius'])
    && isset($_GET['location'])) {

    /*
     * Set $DEVELOPER_KEY to the "API key" value from the "Access" tab of the
    * {{ Google Cloud Console }} <{{ https://cloud.google.com/console }}>
    * Please ensure that you have enabled the YouTube Data API for your project.
    */
    $DEVELOPER_KEY = 'AIzaSyC6q-84bJv9HWCUDT4_SQ5Bp9WFJW2Z-e4';

    $client = new Google_Client();
    $client->setDeveloperKey($DEVELOPER_KEY);

    // Define an object that will be used to make all API requests.
    $youtube = new Google_Service_YouTube($client);

    try {
        // Call the search.list method to retrieve results matching the specified
        // query term.
        $searchResponse = $youtube->search->listSearch('id,snippet', array(
            'type' => 'video',
            'q' => $_GET['q'],
            'location' =>  $_GET['location'],
            'locationRadius' =>  $_GET['locationRadius'],
            'maxResults' => $_GET['maxResults'],
        ));

        $videoResults = array();
        # Merge video ids
        foreach ($searchResponse['items'] as $searchResult) {
            array_push($videoResults, $searchResult['id']['videoId']);
        }
        $videoIds = join(',', $videoResults);

        # Call the videos.list method to retrieve location details for each video.
        $videosResponse = $youtube->videos->listVideos('snippet, recordingDetails', array(
            'id' => $videoIds,
        ));

        $videos = '';

        // Display the list of matching videos.
        foreach ($videosResponse['items'] as $videoResult) {
            $videos .= sprintf('<li>%s,%s (%s,%s)</li>',
                $videoResult['id'],
                $videoResult['snippet']['title'],
                $videoResult['recordingDetails']['location']['latitude'],
                $videoResult['recordingDetails']['location']['longitude']);
            echo $videos;
        }


//$htmlBody = <<<END
//    <h3>Videos</h3>
//    <ul>$videos</ul>
//END;


    } catch (Google_Service_Exception $e) {
        $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    } catch (Google_Exception $e) {
        $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    }



}




?>

Answer 1

问题似乎是您尝试指定非异步请求。我相信这些已被当前/现代浏览器阻止。如果您检查 JavaScript 控制台，您可能会看到如下错误:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

如果您删除它，我相信它会像以前一样工作(如果它更早工作，如您所说)。 jQuery ajax 请求默认是异步的，因此如果删除该行，它将异步操作。

(这不是您问题的一部分，但您可以考虑将输入字段的 value="" 留空，并将帮助文本放入 placeholder="" 属性。这些将为您的用户提供线索，而不会有在您的请求中传递该信息的风险。)

至于显示调用结果，让您的调用返回 HTML 并简单地在调用页面上显示该 HTML 就可以了。由于您使用的是 jQuery，您可以像这样简化代码: $('#geolocation-results').html(data); 您可能需要/想要指定 dataType: 'html '也在你的通话中。 (https://api.jquery.com/jquery.get/)

天哪。现在很明显了。我相信您的 .get 调用结构是错误的。应该是这样的:

$.get(
    "../php/geolocation.php",
    {
        q: keyword,
        location: location,
        locationRadius: r,
        maxResults: maxResult
    },
    function (data) {
        $('#geolocation-results').html(data);
    }
);

现在检查...好吧，在有点匆忙之后，我可以确认 $.get() 调用的结构是错误的。如上所示进行更正，它将正确调用 PHP 文件并在 geolocation-results 元素中显示输出。