Question

我有这个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>

Answer 1

涉及的主要步骤是;

1）在您的文档中包含jquery库。

2）将事件处理程序绑定到submit事件。

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>

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

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

2 个答案: