通过ajax发送多个数据

Sending multiple data through ajax

本文关键字：数据 ajax 通过      更新时间：2023-09-26

据我所知，我的问题是stackoverflow上多个较小问题的恼人组合，但我无法弄清楚。

我正试图通过ajax发送一个音频文件，这很好，但我也想包括它上传/录制的位置。这是我通过阅读多个类似问题得出的结论：

（不起作用）

function getLocation() {
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
    function foundLocation(position) {
        var longitude = position.coords.longitude;
        var latitude = position.coords.latitude;
        //alert("LAT : "+latitude +", LONG : "+longitude);
        return [longitude, latitude];
    }
}
function noLocation() {
    //alert('Could not find location');
}
function uploadAudio(mp3Data){
    var pos = getLocation();
    var longitude = pos[0];
    var latitude = pos[1];
    var reader = new FileReader();
    reader.onload = function(event){
        var fd = new FormData();
        var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
        console.log("mp3name = " + mp3Name);
        fd.append('fname', mp3Name);
        fd.append('data', event.target.result);
        fd.append('longitude', longitude);
        fd.append('latitude', latitude);
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            //console.log(data);
            log.innerHTML += "'n" + data;
        });
    };
    reader.readAsDataURL(mp3Data);
}

我必须处理数据的php脚本如下：

<?php
if(!is_dir("recordings")){
    $res = mkdir("recordings",0777); 
}
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data, 
//echo ($decodedData);
$filename = 'audio_recording_' . date( 'Y-m-d-H-i-s' ) .'.mp3';
// write the data out to the file
$fp = fopen('recordings/'.$filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

我希望能够用类似$latitude=$_POST['longditude']的东西来检索位置；

现在我不知道如何让JS在getLocation（）函数中返回多个数据，也不知道如何使ajax正确地发送所有这些数据。任何帮助都将不胜感激！

由于您通过AJAX以原始格式发送文件，因此无法在消息正文中发送更多数据。因此，您应该在GET (query string)中发送数据。

客户端：

function uploadAudio(mp3Data){
    var pos = getLocation();
    var longitude = pos[0];
    var latitude = pos[1];
    var reader = new FileReader();
    reader.onload = function(event){
        var fd = new FormData();
        var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
        console.log("mp3name = " + mp3Name);
        fd.append('fname', mp3Name);
        fd.append('data', event.target.result);
        var ajax_url = 'upload.php?longitude='+longitude+'&latitude='+latitude;
        $.ajax({
            type: 'POST',
            url: ajax_url,
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            //console.log(data);
            log.innerHTML += "'n" + data;
        });
    };
    reader.readAsDataURL(mp3Data);
}

服务器端：

$longitude = $_GET['longitude'];
$latitude = $_GET['latitude'];

要获得所有返回值（如果有多个），必须遍历响应数据，否则只会获得一个。

.done(function(data) { 
    var output = '';
    $.each(data,function(index, value) {
       output += value
    });
}
相关文章：