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

因此，请允许我首先说，我已经看了前面的问题，但没有一个能帮到我。我的问题如下，我有一个带有表单的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>

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;
    }
);

}

因此，我的问题有两个，如何以类似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()));
    }



}




?>

---

我认为你的代码中有一些错误。您不需要将

async

（而不是

asynch

）设置为

false

，因为它会无故阻塞客户端浏览器。还要注意

url

参数，该参数不应包含任何引号。最后，您应该将触发器更多地放在submit事件上，而不是onclick事件上，因为您只需按

Enter

即可提交表单，而无需单击按钮

您可以尝试使用以下javascript：

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

    alert("keyword is: " + keyword);

    $.get(
        '../php/geolocation.php',
        {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;
    }
});

---

我认为你的代码中有一些错误。您不需要将

async

（而不是

asynch

）设置为

false

，因为它会无故阻塞客户端浏览器。还要注意

url

参数，该参数不应包含任何引号。最后，您应该将触发器更多地放在submit事件上，而不是onclick事件上，因为您只需按

Enter

即可提交表单，而无需单击按钮

您可以尝试使用以下javascript：

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

    alert("keyword is: " + keyword);

    $.get(
        '../php/geolocation.php',
        {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;
    }
});

---

问题似乎是您试图指定非异步请求。我相信这些都被当前/现代浏览器屏蔽了。如果检查javascript控制台，可能会看到如下错误：

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

主线程上的同步XMLHttpRequest不推荐使用，因为它会对最终用户的体验产生有害影响。如需更多帮助，请查看

如果你删除它，我相信它会像以前一样工作（如果它工作得更早，正如你所指出的）。默认情况下，jQueryAjax请求是异步的，因此如果删除该行，它将异步运行

（这不是你的问题的一部分，但是你可以考虑把你的输入字段的<代码>值=“/<代码>空白，并把你的帮助文本放在<代码>占位符=”“/<代码>属性中。这些将为你的用户提供线索，而不必在你的请求中传递这些信息。” 至于显示呼叫结果，让您的呼叫返回HTML并在您的呼叫页面上简单地显示该HTML应该是可行的。因为您使用的是jQuery，所以可以简化代码如下：

$（“#地理位置结果”）.html（数据）

您可能还需要/希望在调用中指定

数据类型：“html”

。（）

哦，天哪。现在很明显。我相信你的“接电话”结构是错误的。应该是这样的：

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

---

现在检查一下。。。好的，在匆匆忙忙之后，我可以确认

$.get（）

调用的结构是错误的。如上所示更正它，它将正确调用PHP文件，并在

地理定位结果
元素中显示输出。
问题似乎是您试图指定非异步请求。我相信这些都被当前/现代浏览器屏蔽了。如果检查javascript控制台，可能会看到如下错误：

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

主线程上的同步XMLHttpRequest不推荐使用，因为它会对最终用户的体验产生有害影响。如需更多帮助，请查看

如果你删除它，我相信它会像以前一样工作（如果它工作得更早，正如你所指出的）。默认情况下，jQueryAjax请求是异步的，因此如果删除该行，它将异步运行

（这不是你的问题的一部分，但是你可以考虑把你的输入字段的<代码>值=“/<代码>空白，并把你的帮助文本放在<代码>占位符=”“/<代码>属性中。这些将为你的用户提供线索，而不必在你的请求中传递这些信息。”
至于显示呼叫结果，让您的呼叫返回HTML并在您的呼叫页面上简单地显示该HTML应该是可行的。因为您使用的是jQuery，所以可以简化代码如下：
$（“#地理位置结果”）.html（数据）
您可能还需要/希望在调用中指定
数据类型：“html”
。（）

哦，天哪。现在很明显。我相信你的“接电话”结构是错误的。应该是这样的：

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

现在检查。。。好的，在匆匆忙忙之后，我可以确认
$.get（）
调用的结构是错误的。如上所示更正它，它将正确调用PHP文件，并在
地理定位结果
元素中显示输出。
需要注意的是，PHP文件本身工作正常。如果我为按钮而不是表单添加了prevent默认值，那么它仍然会重新提交。如果我为按钮而不是表单添加了阻止默认值，那么它仍然会重新提交。我不相信我的控制台日志中有过这个错误。很好的一点是，我确实将其更改为placeholder。我刚刚注意到您调用中的url属性在引号周围有引号，例如“.”/php/geolocation.php“'。如果您将其更改为
url:'../php/geolocation.php'
是否有效？在我发布问题后更改了它，但仍然拒绝工作。阿贾克斯当然是个奇怪的家伙。请看我的编辑。我认为这只是你的
$.get（）的结构调用。@某个学生，在我的回答中编辑了
$.get（）
调用大纲后，您是否能够尝试它？我相信我的控制台日志中从未出现过此错误。很好的一点是，我把它改成了占位符。我刚刚注意到你通话中的url属性有引号