如何調用AJAX在我的HTML表單

我有這個AJAX功能：如何調用AJAX在我的HTML表單

$.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> 
<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如何看起來像？

謝謝som多:)！

編輯：參與

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

來源

2015-11-20 Lamawy

刪除動作從你的形式，創建一個按鈕和綁定點擊事件打電話給你的Ajax代碼。有很多這樣的例子。 – Jules

@Jules ok你能查看我編輯的代碼嗎？我應該在onclick方法中寫什麼？阿賈克斯沒有一個名字或一些東西，所以我可以打電話給它？ – Lamawy

$（function（）{function clickme（）{您的ajax代碼在這裏}; $（'button'）。on（'click'，clickme}）;建議，閱讀jquery文檔來理解代碼 – Jules

主要步驟;

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>

來源

2015-11-20 03:32:08 partypete25

我有一個問題，這個文件的擴展名將是.html？並且我可以在本地運行它在我的瀏覽器沒有本地主機？因爲當我試圖運行它什麼都沒有發生在所有:( – Lamawy

1）是的，你可以將我上面發佈的內容包裝到文檔的正文中。我只發佈了關注的領域。我通常會在關閉body標籤之前放置所有的javascript。庫和插件（例如，jQuery），然後我的功能。 2）不需要在您的本地主機或Web服務器上運行。 – partypete25

好吧，那麼它必須是與web服務相同的服務器嗎？我應該在visual studio中寫這個html嗎？ – Lamawy

你必須有一些基本的語法錯誤，但是試試這個（讓你適當的修改）：

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

來源

2015-11-20 03:33:17

如何調用AJAX在我的HTML表單

回答

相關問題