Fatal编程技术网
  • php/
  • 如何在模式窗口中将JQuery变量转换为PHP变量而不刷新页面

如何在模式窗口中将JQuery变量转换为PHP变量而不刷新页面

php jquery ajax

如何在模式窗口中将JQuery变量转换为PHP变量而不刷新页面,php,jquery,ajax,Php,Jquery,Ajax,我不熟悉这个客户机变量到服务器变量的传输过程 实际上，我有一个GoogleMapsAPI函数，在地图上有一个标记，表示我的PHP web应用程序的用户表（MySQL）中的用户名。当我双击地图标记时，我的Jquery函数会弹出一个模式，并且我能够在一个模式中的id/name元素（chosenUser）中获取用户名。但是，我现在需要能够在PHP变量（$chosenUser）中访问此值，而无需任何“提交”或页面刷新，这样我就可以调用PHP函数-getUserChannelID（$chosenUser）

我不熟悉这个客户机变量到服务器变量的传输过程

实际上，我有一个GoogleMapsAPI函数，在地图上有一个标记，表示我的PHP web应用程序的用户表（MySQL）中的用户名。当我双击地图标记时，我的Jquery函数会弹出一个模式，并且我能够在一个模式中的id/name元素（chosenUser）中获取用户名。但是，我现在需要能够在PHP变量（$chosenUser）中访问此值，而无需任何“提交”或页面刷新，这样我就可以调用PHP函数-getUserChannelID（$chosenUser），并继续执行其余逻辑

我的断开连接是能够以#chosenUser的身份访问id/name上的值，并将其传输到PHP变量$chosenUser，而无需“提交”或页面刷新。下面的所有代码都在同一页上

我在SF博文中读到关于使用AJAX来实现这一点的文章，但由于我是AJAX的婴儿，我对如何在没有表单“提交”或页面刷新的情况下在同一页面上实现这一点感到困惑

请您帮助更正下面的代码，以便我可以将#chosenUser中的值转换为PHP变量$chosenUser

这是我在同一个PHP文件中的所有代码

<?php
require_once("classes/autoload.php");
$db = new Database();
....

?>

<html>
<head>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="margin: 0 auto;">            
    <div style="height: 100%; position: relative; top:30px;">
            <div id="map" style="height: 100%;"></div>
    </div>
    <div class="modal fade" id="showChannel" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Channel Preview</h4>
                </div>
                <div class="modal-body">
                    <div>
                       <input type="hidden"  id="chosenUser" name="chosenUser" value="">        
<!-- This is where I need help. How do I transfer that value I am getting for "chosenUser" above into the PHP variable $chosenUser - ideally the code in the next line would need to be executed -->
                       <?php $channelId = $db->getUserChannelID($chosenUser); ?>
                       .....
                   </div>
                </div>
             </div>
        </div>
     </div>
</div>
</body>
</html>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script src="multiple_marker/oms.js"></script>

<script type="text/javascript">
var mapMarkers = [];
var infowindow = null;
var infowindowOpen;
var map, oms;
var gm = google.maps;
var markerIcons = new Array();
var gmarkers = [];

function getCoords() {

    $.ajax({
        url: "markers.php",  // this markers.php provides the value of "Locations" array used below
        type: "POST",
        data: {
            foo: "bar"
        },
        dataType: "json",
        success: function (returnedData) {

            console.log(returnedData);
            if(!spiderify)
                moveMarkerMap(returnedData);
            //window.setInterval(getCoords, 10000);
            window.setTimeout(getCoords, 2000);
        }
    });
}

function MarkerMap(json) {
    var iconBase;
    oms.addListener('click', function (marker) {
        console.log('clicked');
    });

    if ((json.Locations.length > 0)) {
        for (i = 0; i < json.Locations.length; i++) {
            var location = json.Locations[i];
            var username = location.username; // I am getting the value of username here
            var myLatlng = new gm.LatLng(location.Lat, location.Long);
            var marker = new gm.Marker({
                    position: myLatlng,
                    map: map,
                    username: username,
                });
            var infowindow = new gm.InfoWindow();
            var div = document.createElement('DIV');

            gm.event.addListener(marker, 'dblclick', (function (marker, div, infowindow) {
                    return function () {
                        $('#showChannel').modal('show');

                        $('#chosenUser').val(marker.username); //passing the value of marker.username to the modal input id/name="chosenUser"
                    };
                })(marker, div, infowindow));

                gmarkers[id] = marker;
            }
        }
        window.map = map;
        window.oms = omg;
    }
    gm.event.addDomListener(window, 'load', initialize);
</script>


&时代；
频道预览
.....
var mapMarkers=[]；
var infowindow=null；
var信息窗口打开；
var图，oms；
var gm=google.maps；
var markerIcons=新数组（）；
var gmarkers=[]；
函数getCoords（）{
$.ajax({
url:“markers.php”//this markers.php提供下面使用的“Locations”数组的值
类型：“POST”，
数据：{
傅：“酒吧”
},
数据类型：“json”，
成功：函数（返回数据）{
控制台日志（返回的数据）；
如果（！spiderify）
移动标记映射（返回的数据）；
//设置间隔（getCoords，10000）；
设置超时（getCoords，2000）；
}
});
}
函数MarkerMap（json）{
var iconBase；
oms.addListener（'click'，函数（标记）{
console.log（'clicked'）；
});
如果（（json.Locations.length>0））{
对于（i=0；i
好吧，你不能按照你想象的方式在PHP和JS之间进行准确的通信。PHP是在页面加载时执行的，在任何内容显示之前，甚至在任何javascript发送到客户端之前，所以不可能按照您的意愿执行

您可以在页面加载完成后使用javascript调用PHP脚本。您可以随时使用延迟循环、单击按钮以及调用javascript函数的任何方式来执行此操作。通过这种方式，您可以将信息从javascript发送到PHP，当PHP脚本完成运行时，它可以向javascript报告信息

如果希望在PHP中使用js变量，可以使用多种方法，例如POST或GET请求。我将使用post发布一个示例，这与您发送表单时使用的相同。您需要包含jQuery才能使其工作

JS

PHP

现在由您来实施。

请查看我的答案，它有一个非常详细的解释。您最感兴趣的是答案的第二部分，与js和php之间的通信有关。@aron9forever，谢谢您的链接。很抱歉，我无法从您在该链接中的回答中了解如何将“id/name”-chosenUser的值传递到$chosenUser PHP变量。请你再解释一下好吗？我对这种类型的编码还是很生疏的。我的模式很好，只是没有发生价值转移。我会写一个更详细的回答。谢谢，这很有意义。我尝试将该PHP脚本放在同一个myscript.PHP文件中，以便在myscript.PHP的模式中获得$var1的值，但在$var1中没有得到任何值。$.post（“myscript.php”，{info1:info1}，函数（数据）{$（“#消息”）.fadeIn（）；}）；不要试图直接在代码中实现它。试着先写一个简单的脚本，看看它是如何工作的。您需要将包含模态、js和其他所有内容的主PHP/HTML页面与只执行一项任务的
myscript.PHP
页面分开，即从js获取传递的数据，对其进行处理，然后将信息返回到javascript。为了给出一个实际示例，我有一个页面使用了此功能，调用
myservices.php
。该页面包含许多表单和 
var myVar = "my info";
var myVar2 = "my other info";
$.post("myscript.php", {
info1: myVar,
info2: myVar2
}, function(answer) {
// answer will contain whatever the PHP script printed
// in this example answer will be "success"
alert(answer);
} );

$var1 = $_POST['info1'];
$var2 = $_POST['info2'];
if(!empty($var1) && !empty($var2))
{
    echo "success";
}