如何在没有页面刷新的模态窗口中将JQuery变量转换为PHP变量

时间:2016-02-28 15:21:51

标签: php jquery ajax

我是这个客户端变量到服务器变量传输过程的新手。

基本上我有一个Google maps api函数,并在地图上有一个标记来表示我的PHP Web应用程序的用户表(MySQL)中的用户名。当我双击该地图标记时,我的Jquery函数弹出一个模态,我能够在一个id / name元素(selectedUser)中获取用户名。但是,我现在需要能够在没有任何“提交”或页面刷新的PHP变量($ chosenUser)中访问此值,以便我可以调用我的PHP函数 - getUserChannelID($ chosenUser),并继续其余的逻辑。

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

我正在阅读有关使用AJAX在SF帖子中执行此操作的信息,但由于我非常喜欢使用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>

1 个答案:

答案 0 :(得分:0)

嗯,你可以按照你想的方式在PHP和JS之间进行准确的沟通。在任何内容显示之前,在任何javascript被发送到客户端之前,PHP都会在页面加载时执行,因此无法按照您的意愿执行。

您可以使用javascript在页面加载完成后调用PHP脚本。您可以随时使用延迟循环,单击按钮,以任何方式调用您的javascript函数。这样你就可以将信息从javascript发送到PHP,当PHP脚本完成运行时,它可以向javascript报告信息。

你想从PHP中的js变量,有多种方法可以做到这一点,比如POST或GET请求。我将使用POST发布一个示例,这与您用来发送表单的内容相同。您需要包含jQuery才能实现此目的。

JS

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

PHP

override func viewDidLoad() {
    super.viewDidLoad()

    _ = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "timer:", userInfo: nil, repeats: true)  

    self.mover()
}

/**
 Selector

 - parameter timer: NStimer
 */
func timer(timer:NSTimer!){
    self.lblTiempo.text = "Te haz movido"
}

现在由你来实现它。