jquery.Ajax数据获取

Question

I try to obtain data stored in another url. There is a text field in which I want to set the value retrieved from the url at every 1 second(The url's content is continually changing at each second). How can I do that? I don't want refreshing entire page at each second. Instead, only the field must be refreshed. But, in my code, the field is not set as intended and it is empty.

What's wrong with my idea/approach?

Html,

<div class="form-group">
<label class="" for="temperature">Temp.:</label>
<input type="text" id="temperature" class="form-control">
</div>

My ajax/jquery,

$(document).ready(function() {
    setInterval(function() {
        $.ajax('/theURLData', {
            success: function(data, status, xhr) {
                $('#temperature').val(data);
            }
        });
    }, 1000);
});

Answer 1

I don't think setInterval(function()… works as intended here. Try the following,

<script type = "text/javascript"> 
  $(document).ready(function f() {
    $.ajax('/theURLData', {
        success: function(data, status, xhr) {
            $('#temperature').val(data);
            setTimeout(f, 1000);
        }
    });
}); 
</script>