Question

我有一个php页面，按钮定义如下：

$id=17;
echo " <a href='#' class='btn btn-xs' onclick=process($id,'99')>ON</a>";

调用脚本：

    <iframe height='0' width='0' name='hiddenFrame' id='hiddenFrame'>
</iframe>
<script language=javascript>
  //  Grab the device id and type and append them to the forms querystring ...
  function process(id,value)    
    {   
      document.getElementById("hiddenFrame").src="http://192.168.1.90/JSON?request=controldevicebyvalue&ref=" + id +"&value=" + value;
    }     
</script>

目的是使用参数调用脚本中的URL，因为它将触发API上的事件。按钮和脚本可以工作，但是当我点击页面按钮中的按钮时，它会滚动到顶部 - 这对于我的页面很长的移动设备来说是非常不受欢迎的。此外，我认为目的可以用更少或更优雅的代码来实现？

Answer 1

滚动到顶部的原因是因为#属性中的href。您可以在原始JS中执行此操作，但也可以使用jQuery。在PHP文档中，我建议存储要在HTML5 data-属性中传递的变量。由于您需要同时传递ID和值，我们可以将data-id和data-value用于此目的，或者您想要的任何其他后缀。

$id=17;
echo " <a href='#' class='btn btn-xs' data-id='$id' data-value='99'>ON</a>";

对于jQuery部分，您可以使用$.ajax的AJAX调用组合，并使用data对象构造查询字符串。最后，合并e.preventDefault()以防止在点击<a>之后触发默认事件（在这种情况下，将用户弹回到HTML文档的顶部）。

$('a[data-id][data-value]').click(function(e) {
    // Make AJAX call
    $.ajax({
        url: 'http://192.168.1.90/JSON',
        type: 'GET',
        data: {
            request: 'controldevicebyvalue',
            ref: $(this).data('id'),    // Or $(this).attr('data-id')
            id: $(this).data('value')   // Or $(this).attr('data-value')
        }
    }).done(function(msg) {
        // Callback for success
        console.log('Success: ' + msg);
    }).fail(function(msg) {
        // Callback for failure
        console.log('Failure: ' + msg);
    });

    // Prevent default action (scrolling to top)
    e.preventDefault();
});

唯一的缺点是AJAX调用受same origin policy限制，以阻止XSS。如果要对其他域进行AJAX调用，请考虑使用JSONP。

最好检查浏览器是否有从AJAX调用收到的HTTP标头，以便执行故障排除。

在不离开页面的情况下触发API网址

1 个答案: