如何在我的 HTML 表单中调用 ajax答案

【问题标题】：How to call ajax in my HTML form如何在我的 HTML 表单中调用 ajax
【发布时间】：2016-02-22 10:11:21
【问题描述】：

我有这个 ajax 函数：

$.ajax({
url: "http://localhost:56472/WebSite2/Service.asmx/Area",
method:"post",
data: {
    l: "custom value",
    b: "custom value",
}
success: function (data) {
    console.log(data.length);
    var xmlDoc = $.parseXML(data);
    var jXml = $(xmlDoc);
    var value = jXml.find("int").text();
    $("#result").text(value);
},
failure: function (err) {
    console.log("could not call the service : " + err);
}
});

我想在这个 html 中使用它来显示结果：

<html>
<head>
<title>WebService Call using HTTP POST</title>
<body>
<form action="http://localhost:56472/WebSite2/Service.asmx/Area" method="POST">
<input name="l">
<input name="b">
<input type="submit" value="Click for Area">
</form>
</body>
</head>
</html>

有人能告诉我如何用这个表单调用这个 ajax 吗？以及完整的 html 会是什么样子？

非常感谢 :)！

编辑：

<html>
<head>
<title>WebService Call using HTTP POST</title>
<body>
<script>
     $(function () {
            function clickme() {
                $.ajax({
                    url: "http://localhost:56472/WebSite2/Service.asmx/Area",
                    method: "post",
                    data: {
                        l: "custom value",
                        b: "custom value",
                    },
                    success: function (data) {
                        console.log(data.length);
                        var xmlDoc = $.parseXML(data);
                        var jXml = $(xmlDoc);
                        var value = jXml.find("int").text();
                        $("#result").text(value);
                    },
                    failure: function (err) {
                        console.log("could not call the service : " + err);
                    }
                });
            };

            $("button").on("click", clickme)
        });
</script>
<form method="POST">
<input name="l">
<input name="b">
<button type="button" onclick="clickme()">Click for Area</button>
</form>
<h1 id="result"></h1>
</body>
</head>
</html>

【问题讨论】：

从表单中删除操作，创建一个按钮并绑定点击事件来调用您的 ajax 代码。这方面有很多示例。
@Jules 好的，你能检查一下我编辑的代码吗？我应该在 onclick 方法中写什么？ ajax 没有名称或其他东西，所以我可以调用它？
$(function(){function clickme(){your ajax code here}; $('button').on('click', clickme }); 建议，阅读jquery文档了解代码。
@Jules 你能检查一下编辑后的代码吗？我照你说的做了，但什么也没发生，不知道是不是做错了什么？
您的代码格式不正确（部分是我的错）。我把更正的副本放在这里jsfiddle.net/u7f1npxq

标签： jquery html ajax xml

【解决方案1】：

涉及的主要步骤是；

1) 将 jquery 库包含到您的文档中。

2) 将事件处理程序绑定到提交事件。

3) 获取两个输入字段的输入值。

4) 请求页面，发送一些额外的数据并返回结果。

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
    // document ready event. Waits for the document to be fully loaded and ready before working with it.
    $(function () {

        // bind an event handler to the submit event
        $("#myForm").submit(function (event) {

            event.preventDefault(); // cancels the event, meaning that the default action that belongs to the event will not occur.

            // get our forms input values
            var lValue = $('input[name="l"]').val();
            var bValue = $('input[name="b"]').val();

            $.post("http://localhost:56472/WebSite2/Service.asmx/Area", {l: lValue, b: bValue}, function (data) {
                console.log(data.length);
                var xmlDoc = $.parseXML(data);
                var jXml = $(xmlDoc);
                var value = jXml.find("int").text();
                $("#result").text(value);
            }).fail(function (err) {
                console.log("could not call the service : " + err);
            });

        });

    });
</script>
<form id="myForm">
    <input name="l">
    <input name="b">
    <button type="button">Click for Area</button>
</form>

【讨论】：

我有一个问题，这个文件的扩展名是.html？我可以在没有本地主机的浏览器上本地运行它吗？因为当我试图运行它时，什么都没有发生:(
1) 是的，您可以将我在上面发布的内容包装到您的文档正文中。我只发布了关注的领域。作为一项规则，我通常将我所有的 javascript 放在结束正文标记之前。首先是库和插件（例如 jquery），然后是我的函数。 2）不，它需要在您的本地主机或网络服务器上运行才能工作。
好的，那么它是否必须是与 web 服务相同的服务器？我应该在 Visual Studio 中编写这个 html 吗？
@Lamawy 看看这个问题stackoverflow.com/questions/16556099/…。你应该试试谷歌“jquery ajax webservices parameters asmx”

【解决方案2】：

你有一些基本的语法错误，但试试这个（进行适当的更改）：

<!DOCTYPE html>
<html>
<head>
<title>WebService Call using HTTP POST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
function clickme(){
$.ajax({
    url: "http://localhost:56472/WebSite2/Service.asmx/Area",
    method:"post",
    data: {
        l: "custom value",
        b: "custom value",
    },
    success: function (data) {
        console.log(data.length);
        var xmlDoc = $.parseXML(data);
        var jXml = $(xmlDoc);
        var value = jXml.find("int").text();
        $("#result").text(value);
    },
    failure: function (err) {
        console.log("could not call the service : " + err);
    }
});
}
jQuery(document).ready(function($){

$("button").on("click", function(){
    clickme();
});
});
</script>
<form method="POST">
<input name="l">
<input name="b">
<button type="button" onclick="clickme()">Click for Area</button>
</form>
<h1 id="result"></h1>
</body>
</html>

【讨论】：