Javascript 单击将触发的JQuery Ajax调用_Javascript_Jquery_Html_Ajax

Javascript 单击将触发的JQuery Ajax调用

javascript jquery html ajax

Javascript 单击将触发的JQuery Ajax调用,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我不熟悉JavaScript、Jquery和Ajax。这就是我想做的：我的HTML代码中有一个按钮，我想触发一个AJAX调用，该调用将向本地机器上运行的web服务器发出GET请求这就是我到目前为止所做的： JS代码： $（'call'）。单击（函数（）{ 警报（“hiii”）； $.ajax({ 'url'：'localhost:8080/blah/blah/blah'， 'type'：'GET'， beforeSend:function（）{ 警报（1）； }, 错误：函数（）{ 警报

我不熟悉JavaScript、Jquery和Ajax。这就是我想做的：

我的HTML代码中有一个按钮，我想触发一个AJAX调用，该调用将向本地机器上运行的web服务器发出GET请求

这就是我到目前为止所做的：

JS代码：


$（'call'）。单击（函数（）{
警报（“hiii”）；
$.ajax({
'url'：'localhost:8080/blah/blah/blah'，
'type'：'GET'，
beforeSend:function（）{
警报（1）；
},
错误：函数（）{
警报（“错误”）；
},
“成功”：函数（数据）{
如果（数据=“成功”）{
警报（“已发送请求！”）；
}
}
});
});

您的代码有一些问题。首先，您的选择器没有指向任何类或ID。您需要分别对类或ID使用

.call

或

#call

。其次，您的脚本没有

document.ready

函数。查看下面的代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    // document.ready function
    $(function() {
        // selector has to be . for a class name and # for an ID
        $('.call').click(function(e) {
            e.preventDefault(); // prevent form from reloading page
            alert("hiii");

            $.ajax({
                'url' : 'localhost:8080/blah/blah/blah',
                'type' : 'GET',
                beforeSend: function() {
                   alert(1);
                },
                error: function() {
                   alert('Error');
                },
                'success' : function(data) {
                   if (data == "success") {
                        alert('request sent!');
                   }
                }
            });
        });
    });
</script>


//document.ready函数
$（函数（）{
//选择器必须为.表示类名，为#表示ID
$（'.call'）。单击（函数（e）{
e、 preventDefault（）；//防止表单重新加载页面
警报（“hiii”）；
$.ajax({
'url'：'localhost:8080/blah/blah/blah'，
'type'：'GET'，
beforeSend:function（）{
警报（1）；
},
错误：函数（）{
警报（“错误”）；
},
“成功”：函数（数据）{
如果（数据=“成功”）{
警报（“已发送请求！”）；
}
}
});
});
});

正如@NightOwlPrgmr提到的，您的选择器是错误的。要更正此问题，必须使用

#call

而不是

。call

，因为这是一个id而不是类属性。另外，

Document.ready

函数将确保代码在加载所有html元素后运行。这将降低尝试使用尚未创建的元素的风险。与上述代码类似的示例代码为：-


//document.ready函数
$（文档）.ready（函数（）{
//选择器必须为.表示类名，为#表示ID
$（“#调用”）。单击（函数（e）{
e、 preventDefault（）；//防止表单重新加载页面
警报（“hiii”）；
$.ajax({
'url'：'本地主机：[端口号\网络服务器]/blah/blah/blah'，
'type'：'GET'，
beforeSend:function（）{
警报（1）；
},
错误：函数（）{
警报（“错误”）；
},
“成功”：函数（数据）{
如果（数据=“成功”）{
警报（“已发送请求！”）；
}
}
});
});
});

出了什么问题？URL看起来可疑--可能需要在其上放置

http://

或

https://

。好的，请更正我的错误，我至少应该看到警报（“hiii”）；当我点击按钮时，对吗？我甚至还没走到那一步。

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
    </script>
</head>
<body>
    <div>
        <form>
            <div class = "buttons">
              <input type="submit" id="call" value="call">
            </div>
        </form>
    </div>
    <script type="text/javascript">
        // document.ready function
        $(document).ready(function() {
            // selector has to be . for a class name and # for an ID
            $('#call').click(function(e) {
                e.preventDefault(); // prevent form from reloading page
                alert("hiii");

                $.ajax({
                    'url' : 'localhost:[port_number_web_server]/blah/blah/blah',
                    'type' : 'GET',
                    beforeSend: function() {
                       alert(1);
                    },
                    error: function() {
                       alert('Error');
                    },
                    'success' : function(data) {
                       if (data == "success") {
                            alert('request sent!');
                       }
                    }
                });
            });
        });
    </script>
</body>