单击按钮时执行ajax功能

Question

我正在尝试创建一个可以检查网址是好是坏的网页。 该网页很简单。 网页上应该只有一个按钮。 无论何时单击该按钮，它都会检查网址的状态。 作为测试用例，假设我正在检查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>

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

Answer 2

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>

Answer 3

您需要使用JQUery引用HTML控件，并且缺少一些逗号，请看下面的小提琴：

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

        $('#home').click(function(){
        $.ajax({
             url:$('#url').val(),
             type:'get',
             async:false,
             success: function(result) {
                 $("#lblResult").html($('#url').val()+': Working');
            },
             error: function(result){
                 $("#lblResult").html($('#url').val()+': Failed');
            }
            });

   });