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

Question

I have a php page with buttons defined like this:

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

calling a script:

    <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>

The purpose is to call the URL in the script with the parameters as it will trigger an event on the API. The buttons and the scripts works, but I when I hit a button in the buttom of the page, it scrolls to the top - which is quite unwanted with a mobile device where my page will be long. Furthermore, I think the purpose can be achived with less or more elegant code?

Answer 1

The reason why it is scrolling to the top is because of the # in the href attribute. You can do it in raw JS, but it's also possible with jQuery. In your PHP document, I recommend storing variables you want to pass in HTML5 data- attribute. Since you need to pass both ID and value, we can use data-id and data-value for the purpose, or any other suffixes you desire.

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

For the jQuery part, you can use a combination of an AJAX call using $.ajax and construct your query string using the data object. Finally, incorporate e.preventDefault() to prevent firing of the default events that follows clicking on the <a> (in this case, catapults user back to the top of the HTML document).

$('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();
});

The only drawback is that AJAX calls are restricted by the same origin policy to prevent XSS. If you are making AJAX calls to a different domain, consider using JSONP.

It is good practice to inspect your browser for HTTP headers received from the AJAX call, in order to perform troubleshooting.