单击按钮时执行ajax功能

时间:2015-06-22 22:10:43

标签: javascript jquery html ajax

我正在尝试创建一个可以检查网址是好还是坏的网页。网页很简单。网页上应该只有一个按钮。只要单击该按钮,它将检查URL的状态。作为一个测试案例,让我们说我正在检查google.com。问题是如何将ajax函数参数与html参数连接? 这是我到目前为止所得到的。

<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p>Google Status: %s</p>
<script>
$('#home').click(function(){
  var string;
  $.ajax({
     type:'get',
     url:"https://www.google.com/",
     cache:false,
     async:asynchronous,
     dataType:json,
     success: function(result) {
         string = 'Working';
     }
     error: functionfunction(result){
         string = 'Failed';
     }
  });
});
</script>

3 个答案:

答案 0 :(得分:1)

在ajax响应后更新文本

<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p id='status'>Google Status: %s</p><!-- >change<-->
<script>
$('#home').click(function(){
var string;
 $.ajax({
     type:'get',
     url:"https://www.google.com/",
     cache:false,
     async:asynchronous,
     dataType:json,
     success: function(result) {
         $("#status").html("Google Status: Working"); // change
    }
     error: functionfunction(result){
         $("#status").html("Google Status: Failed");// change
    }
    }
);
});
</script>

答案 1 :(得分:0)

ajax调用本身有很多错误,但我所做的主要更改是更新成功和错误处理程序中的statusText段落的html,并从添加事件处理程序中删除按钮上的onClick事件在javascript。

<input type="button" id="home" value="Start"/>
<br>
<p id="statusText">Google Status:</p>
<script>
$('#home').click(function(){
    $.ajax({
        type:'get',
        url:"https://www.google.com/",
        cache:false,
        async:true,
        dataType:'json',
        success: function(result) {
           $("#statusText").html("Google Status: Working");
        },
        error: function(result){
           $("#statusText").html("Google Status: Failed");
        }
    });
});
</script>

答案 2 :(得分:0)

您需要使用JQUery引用HTML控件, 你错过了一些逗号,看看这个小提琴:

https://jsfiddle.net/0g9zbzqr/3/

execute()