作为一名web开发人员,我还是个新手,我发现自己正在努力解决一个问题。
我想在不使用任何表单方法的情况下将值JavaScript传递给PHP。
这里是我的PHP代码(这是一个幻灯片,我在img
标签中放置了一个onclick
事件,以获得被点击的图像的id,然后id信息存储在我的JavaScript文件上的一个变量中。问题是:我如何将该变量从我的JavaScript文件传递给PHP?):
提前谢谢。致问候,
function getIdImage(clicked_id)
{
// alert(clicked_id);
var ClickedId= clicked_id;
}
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12 widhest">
<div class="bx_wrapper_photo_below">
<ul id="bx_slider_photo_below" class="bx_viewport_photo_below">
<?php while($line = mysqli_fetch_assoc($outcomesListPhotos1)) {?>
<li>
<img src="photos/<?php echo utf8_encode($line['photo']); ?>" class="img-responsive" onclick="getIdImage(<?php echo utf8_encode($line['id_photo']);?>)">
</li>
<?php }?>
</ul>
<a class="pager-prev_below"><i class="icon-chevron-left"></i></a>
<a class="pager-next_below"><i class="icon-chevron-right"></i></a>
</div>
</div>
</div>
Fabio
如果您使用的是标准设置,那么每次向服务器发出请求时,您的PHP代码都会从头到尾运行。它不会像页面上的Javascript代码那样"按需"运行。因此,为了将值传递给PHP脚本,您必须向服务器(PHP代码所在地)发送一个请求,在请求负载中传递所需的值。请求可以通过简单的链接、常规表单或XHR发送。如果你不想重新加载页面,但你想在服务器上运行一些代码,然后在浏览器上做一些事情,那么你选择的工具就是XHR。
为了发送XHR,您可以自己从头开始构建,也可以使用现有的许多库中的一个,这当然是推荐的途径。假设您想使用jQuery:
function getIdImage(clicked_id)
{
jQuery.ajax({
url: '/url/to/my/script.php',
type: 'POST',
dataType: 'json',
data: { clicked_id: clicked_id },
success: function(result) {
// This function will be called when the server returns a success (200 OK) response
console.log(result);
alert('Yay!');
},
error: function(xhr) {
// This function is called when the server fails to process the request, for whatever reason
console.log(xhr);
alert('Nay!');
}
});
}
在您的服务器上,您将有一个脚本来处理这个请求,即您在URL中指向的那个,并且您将能够使用在请求中传递给脚本的任何有效负载
<?php
$data = json_decode($_POST);
echo "The ID of the clicked image is: " . $data->clicked_id;
当然,这个例子不会有多大作用,它只会给回显的字符串返回一个响应。根据您想要做的事情,您需要在进行一些有意义的计算后构建一个响应,并且响应可能是JSON格式的(使用好的旧json_encode
内置PHP函数)。
您需要发送一个包含您的数据的请求,您可以使用评论中提到的AJAX。
这里是JQuery ajax示例:
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
// Available informations
});
您可以使用表单传递变量。除了表单,没有其他方法可以传递php变量。
<form id="WOW" action="" method="get">
<input id="Num" name="clicked_id" type="hidden" value=""/>
</form>
<script type="text/javascript">
$(document).ready(function){
$('#WOW').submit(function(event){
event.preventDefault();
$data = $('#WOW').serialize();
$url = $('#WOW').attr('action');
//your variable is posted to that file!
$.post($url,$data,function(data){
console.log('Veriables sent! and data recieved is:' + data);
});
});
});
function getIdImage(clicked_id)
{
$('#Num').val(clicked_id);
$('#WOW').submit();
}
</script>