dojo/request/xhr

最新推荐文章于 2016-09-02 17:39:29 发布

lianghyan

最新推荐文章于 2016-09-02 17:39:29 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lianghyan/article/details/26581099

本文介绍了一个使用Dojo库进行表单提交的例子。通过JavaScript阻止了默认的表单提交行为，并使用Ajax异步提交表单数据到服务器端的一个Servlet。文章展示了如何将表单数据转换为JSON格式并发送到指定URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html >
<head>

   <link rel="stylesheet" href="demo/claro.css">

   <script>dojoConfig = {parseOnLoad: true}</script>
   <script src='dojo/dojo.js'></script>

   <script>
   require(["dojo/dom-form", "dojo/dom", "dojo/on", "dojo/json", "dojo/request/xhr","dojo/domReady!"],
   function(domForm, dom, on, JSON,xhr){
       var sform = domForm.toObject("myform");
        var fdata = JSON.stringify(sform);

       on(dom.byId("myform"), "submit", function(event){
           alert(domForm.toJson("myform"));
           // Stop the submit event since we want to control form submission.
           event.stopPropagation();
           event.preventDefault();

           xhr("http://localhost:8080/Helloweb24/CVSServlet",
           {
               method: "post",
               query: domForm.toObject("myform"),
              handleAs: "text"
            })
            .then(
               function(data){
               dojo.byId("response").innerHTML = "Form posted correctly.result is: "+JSON.stringify(data);
                },
                function(err){
               dojo.byId("response").innerHTML = "Form posted error."+err;
                });
          });
    });
   </script>
</head>
<body class="claro">
    <b>Simple Form:</b>
<br>
<blockquote>
<form action="CVSServlet" id="myform" name="myform" method="post">
   method: <input type="text" name="method" value="xhrpost"></input>
   Text: <input type="text" name="formInput" value="Some text"></input><br><br>
   Checkbox: <input type="checkbox" name="checkboxInput"></input><br><br>
   <button type="submit" id="submitButton">Send it!</button>
</form>
</blockquote>
<br>
<b>Result</b>
<div id="response"></div>
</body>
</html>